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前 言 


“网 站 开发 案例 课堂 ”系列 图 书 是 专门 为 网 站 开发 和 数据 库 初学 者 量 身 定做 的 一 套 学 习 
用 书 ， 由 刘 玉 红 策划 ， 千 谷 网 络 科技 实 训 中 心 的 高 级 讲师 编著 。 整 套 书 涵盖 网 站 开发 、 数 据 
库 设 计 等 方面 ， 具 有 以 下 几 个 特点 。 

ee 前 沿 科 技 

无 论 是 网 站 建设 、 数 据 库 设 计 还 是 HTML5、CSS3， 我 们 都 精 选 较为 前 沿 或 者 用 户 群 最 
大 的 领域 推进 ， 帮 助 大 家 认识 和 了 解 最 新 动态 。 

。 ”权威 的 作者 团队 

组 织 国家 重点 实验 室 和 资深 应 用 专家 联手 编著 该 套图 书 ， 融 合 丰富 的 教学 经 验 与 优秀 的 
管理 理念 。 

@ 学习 型 案例 设计 

以 技术 的 实际 应 用 过 程 为 主线 ， 全 程 采用 图 解 和 同步 多 媒体 结合 的 教学 方式 ， 生 动 、 直 
观 、 全 面 地 剖析 各 种 应 用 技能 ， 降 低 难度 ， 提 升学 习 效率 。 


编写 目的 


随 着 互联 网 的 普及 ， 很 多 企 事业 单位 、 大 中 专 院 校 学 生 及 普通 网 民 对 于 建立 网 站 的 需求 
越 来 越 强 烈 ， 但 又 因为 不 懂 网 页 代码 程序 ， 而 不 知道 该 从 哪里 下 手 。 本 书 即 针 对 这 样 零 基础 
的 读者 编写 ， 书 中 详细 讲解 了 网 页 设计 和 网 站 建设 中 需要 用 到 的 各 项 技术 ， 能 够 带领 读者 学 
习 网 页 设计 和 网 站 建设 的 全 面 知 识 。 通 过 对 本 书 的 学 习 ， 读 者 可 以 迅速 掌握 设计 网 页 和 开发 
网 站 的 技能 。 


本 书 特色 


e@ 零 基 础 、 入 门 级 的 讲解 

无 论 读者 是 否 从 事 计 算 机 相关 行业 ， 无 论 读者 是 否 接触 过 网 页 设计 与 网 站 建设 ， 都 能 从 
本 书 中 找到 最 佳 起 点 。 

ee 超 多 、 实 用 、 专 业 的 范例 和 项 目 

本 书 在 编排 上 注意 由 浅 入 深 ， 从 网 页 设计 与 网 站 建设 的 基本 操作 开始 ， 带 领 读者 逐步 深 
入 地 学 习 各 种 应 用 技巧 ， 书 中 侧重 实战 技能 ， 使 用 大 量 简单 易 懂 的 实际 案例 进行 分 析 和 操作 
指导 ， 让 读者 读 起 来 简明 轻松 ， 操 作 起 来 有 章 可 循 。 

e ”随时 检测 自己 的 学 习 成 果 

每 章 首 页 中 均 提供 “本 章 要 点 ”， 以 指导 读者 重点 学 习 及 学 后 检查 。 

每 章 最 后 的 “ 跟 我 练 练 手 ”板块 均 根 据 本 章 内 容 精 选 而 成 ， 读 者 可 以 随时 检测 自己 的 学 
习 成 果 和 实战 能 力 ， 做 到 融会 贯通 。 

e 细致 入 微 、 贴 心 提示 

各 章 中 均 使 用 “注意 ”“ 提 示 ”“ 技 巧 ”等 小 栏目 ， 使 读者 在 学 习 过 程 中 更 清楚 地 了 解 
相关 操作 ， 理 解 相关 概念 ， 并 轻松 掌握 各 种 操作 技巧 。 


网 页 设计 与 网 站 建设 
案例 课堂 > 


® ”专业 创作 团队 和 技术 支持 

本 书 由 千 谷 网 络 科技 实 训 中 心 编著 并 提供 技术 支持 。 如 在 学 习 过 程 中 遇 到 任何 问题 ， 可 
添加 智慧 学 习 乐园 QQ 群 (221376441) 进 行 提问 ， 随 时 有 资深 实战 型 讲师 在 旁 指点 ， 并 精 选 难 
点 、 重 点 在 腾讯 课堂 直播 讲授 。 

内 容 总 览 

本 书 以 学 习 网 页 设计 与 网 站 建设 的 最 佳 路 径 来 分 配 章 节 ， 包 括 网 站 基础 入 门 篇 、 静 态 网 
页 制作 篇 、 动 态 网 站 制作 篇 、 网 页 美化 布局 篇 、 网 页 脚本 篇 、 网 页 元 素 设计 篇 、 网 站 开发 实 
战 篇 、 网 站 全 能 扩展 篇 等 。 
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第 7 篇 ”网 站 开发 实战 篇 用 一 一 经 乐 休 阳 类 网 站 开发 实战 是。 由 二 向 名 状 。 | 一 呈 适合 巴 机 各 和 的 


第 8 篇 ”网 站 全 能 扩展 篇 | 一 网站 的 测试 与 发 布 站 | 9 站 安全 与 防 第 策 员 | 网 站 优化 与 推广 


超 值 光盘 


”全程 同步 教学 录像 

涵盖 本 书 所 有 知识 点 ， 详 细 讲 解 每 个 实例 及 项 目的 制作 过 程 及 技术 关键 点 ， 能 更 轻松 地 
掌握 书 中 所 有 的 网 页 设计 与 网 站 建设 的 相关 技术 ， 扩 展 的 讲解 部 分 可 使 读者 收获 更 多 。 

e ” 超 多 容量 王牌 资源 大 放送 

赠送 大 量 王牌 资源 ， 包 括 本 书 实例 源 文件 、 教 学 幻灯 片 、 本 书 精品 教学 视频 、 网 页 样 
式 与 布局 案例 赏析 、Dreamweaver CS6 快捷 键 和 技巧 、HTML 标签 速 查 表 、 精 彩 网 站 配色 
方案 赏析 、CSS+DIV 布局 赏析 案例 、Web 前 端 工 程 师 常见 面试 题 、88 类 精美 实用 的 网 页 模 
板 等 。 


读者 对 象 

没有 任何 网 页 设计 与 网 站 建设 基础 的 初学 者 。 

有 一 定 的 网 页 设计 和 网 站 建设 基础 ， 想 精通 网 站 开发 的 人 员 。 
有 一 定 的 动态 网 站 开发 基础 ， 没 有 项 目 经 验 的 人 员 。 

正在 进行 毕业 设计 的 学 生 。 

大 专 院 校 及 培训 学 校 的 老师 和 学 生 。 

创作 团队 


本 书 由 刘 玉 红 策划 ， 千 谷 网 络 科技 实 训 中 心 高 级 讲师 编著 ， 参 加 编写 的 人 员 有 付 红 、 李 
、 王 攀登 、 郭 广 新 、 侯 永 岗 、 蒲 娟 、 刘 海松 、 孙 若 淞 、 王 月 娇 、 包 慧 利 、 陈 伟 光 、 胡 同 
、 梁 云 梁 和 周 浩 浩 。 

在 编写 过 程 中 ， 我 们 竭尽 所 能 地 将 最 好 的 内 容 呈 现 给 读者 ， 但 也 难免 有 朴 漏 和 不 妥 之 处 ， 敬 
请 读者 不 音 指 正 。 若 您 在 学 习 中 遇 到 困难 、 疑 问 或 有 何 建议 ， 可 发 邮件 至 357975357@qq.com。 
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网 页 设计 与 网 站 建设 
本 案例 课堂 >… 


1.1 认识 网 页 和 网 站 


在 创建 网 站 之 前 ， 首 先 需要 认识 什么 是 网 页 、 什 么 是 网 站 以 及 网 站 的 种 类 与 特点 ， 本 节 
就 来 认识 一 下 网 页 和 网 站 ， 了 解 它 们 的 相关 概念 。 


1.1.1 什么 是 网 页 
网 页 是 Intemet 中 最 基本 的 信息 单位 ， 是 把 文字 、 图 形 、 声 音 、 动 画 等 各 种 多 媒体 信息 相 


互 链 接 起 来 而 构成 的 一 种 信息 表达 方式 。 

通常 情况 下 ， 网 页 中 有 文字 和 图 像 等 基本 信息 ， 有 些 网 页 中 还 有 声音 、 动 画 和 视频 等 多 
媒体 内 容 。 网 页 一 般 由 站 标 、 导 航 栏 、 广 告 栏 、 信 息 区 、 版 权 区 等 部 分 组 成 ， 如 图 1-1 所 示 。 

在 访问 一 个 网 站 时 ， 首 先 看 到 的 网 页 一 般 称 为 该 网 站 的 首页 。 有 些 网 站 的 首页 具有 欢迎 
访问 者 的 作用 。 首 页 只 是 网 站 的 开场 页 ， 单 击 页 面 上 的 文字 或 图 片 ， 即 可 打开 网 站 主页 ， 而 


首页 也 随 之 关闭 ， 如 图 1-2 所 示 。 
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1-1 网 站 网 页 1-2 ”网 站 主页 


网 站 主页 与 首页 的 区 别 在 于 : 主页 设 有 网 站 的 导航 栏 ， 是 所 有 网 页 的 链接 中 心 。 但 多 数 
网 站 的 首页 与 主页 通常 合 为 一 个 页 面 ， 即 省 略 了 首页 而 直接 显示 主页 ， 在 这 种 情况 下 ， 它 们 


指 的 是 同一 个 页 面 。 如 图 1-3 所 示 为 新 浪 网 的 主页 。 


1.1.2 ”什么 是 网 站 


网 站 就 是 在 Intemet 上 通过 超级 链接 的 形式 构成 的 相关 网 页 的 集合 。 简 单 地 说 ， 网 站 是 一 
种 通信 工具 ， 人 们 可 以 通过 网 页 浏览 器 来 访问 网 站 ， 获 取 自己 需要 的 资源 或 享受 网 络 提供 的 


服务 。 
例如 ， 人 们 可 以 通过 淘宝 网 查找 自己 需要 的 信息 ， 如 图 1-4 所 示 。 


图 1-3 新 浪 网 主页 图 1-4 淘宝 网 


1.1.3 ”网 站 的 种 类 和 特点 
按照 内 容 形式 的 不 同 ， 网 站 可 以 分 为 门户 网 站 、 职 能 网 站 、 专 业 网 站 和 个 人 网 站 四 大 类 。 
1， 门 户 网 站 
门户 网 站 是 指 涉及 领域 非常 广泛 的 综合 性 网 站 ， 如 国内 著名 的 三 大 门户 网 站 : 网 易 、 搜 
狐 和 新 浪 。 如 图 1-5 所 示 为 网 易 的 首页 。 
2. 职能 网 站 


职能 网 站 是 指 一 些 公 司 为 展示 其 产品 或 对 其 所 提供 的 售后 服务 进行 说 明 而 建立 的 网 站 。 
如 图 1-6 所 示 为 联想 集团 的 中 文官 方 网 站 。 
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3. 专业 网 站 


专业 网 
的 内 容 。 如 


个 人 网 


图 1-5 网 易 图 1-6 联想 集团 网 站 


站 是 指 专门 以 某 个 主题 为 内 容 而 建立 的 网 站 ， 这 类 网 站 通常 以 某 一 题材 作为 网 站 
图 1-7 所 示 为 赶集 网 ， 该 网 站 主要 为 用 户 提 供 租 房 、 二 手 货 交 易 等 同城 相关 服务 。 
4. 个 人 网 站 


站 是 由 


个 人 开发 建立 的 网 站 ， 在 内 容 形 式 上 具有 很 强 的 个 性 ， 通 常用 来 宣传 自己 


或 展示 个 人 的 兴趣 爱好 ， 如 图 1-8 所 示 。 
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图 1-7 赶集 网 图 1-8 个 人 网 站 


1.2 ”网 页 的 相关 概念 


在 制作 网 页 时 ， 经 常会 接触 到 很 多 和 网 页 有 关 的 概念 ， 如 浏览 器 、URL、FTP、IP 地 
址 、 域 名 等 ， 理 解 与 网 页 相关 的 概念 ， 有 利于 更 好 地 制作 网 页 。 


1.2.1 因特网 


因特网 (Internet) 又 称 为 互联 网 ， 是 一 个 把 分 布 于 世界 各 地 的 计算 机 用 传输 介质 互相 连接 
起 来 的 网 络 。Internet 主要 提供 的 服务 有 万 维 网 (WWW)、 文 件 传输 协议 (FTP)、 电 子 邮 件 (E- 
mail) 及 远程 登录 (Telnet) 等 。 如 图 1-9 所 示 为 Intermet Explorer(IE) 浏 览 器 图 标 ， 通 过 该 浏览 器 
可 以 浏览 互联 网 的 任何 信息 。 


1.2.2 万 维 网 


万 维 网 (World Wide Web) 缩 写 为 WWW 或 简称 3W， 它 是 无 数 个 网 络 站 点 和 网 页 的 集 
合 ， 也 是 Intemet 提供 的 最 主要 的 服务 。 它 是 由 多 媒体 链接 而 形成 的 集合 ， 通 常人 们 上 网 看 到 
的 就 是 万 维 网 的 内 容 。 如 图 1-10 所 示 就 是 使 用 万 维 网 服务 打开 的 百度 首页 。 
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图 1-9 IE 浏览 器 图 标 图 1-10 百度 首页 


1.2.3 浏览 


浏览 器 是 指 将 互联 网 上 的 文本 文档 (或 其 他 类 型 的 文件 ) 翻 译 成 网 页 ， 并 让 用 户 与 这 些 文件 
交互 的 一 种 软件 工具 ， 主 要 用 于 查看 网 页 的 内 容 。 目 前 常用 的 浏览 器 有 很 多 ， 如 Intemet 
Explorer、Firefox、Google Chrome、QQ 浏览 器 、360 浏览 器 等 。 如 图 1-11 所 示 为 使 用 正 浏 
览 器 打开 的 页 面 。 


1.2.4 HTML 


HTML(HyperText Marked Language) 即 超 文本 标记 语言 ， 是 一 种 用 来 制作 超 文本 文档 的 简 
单 标记 语言 ， 也 是 用 于 制作 网 页 的 最 基本 的 语言 ， 它 可 以 直接 由 浏览 器 执行 。 如 图 1-12 所 示 
为 使 用 HTML 语言 制作 的 页 面 。 
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图 1-11 IE 浏览 器 打开 的 页 面 图 1-12 ”使 用 HTML 语言 制作 的 页 面 
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URL(Uniform Resource Locator) 即 统一 资源 定位 器 ， 也 就 是 网 络 地 址 ， 是 在 Internet 上 用 
来 描述 信息 资源 ， 并 将 Internet 提供 的 服务 统一 编 址 的 系统 。 简 单 来 说 ， 通 常人 们 在 浏览 器 中 
输入 的 网 址 就 是 URL 的 一 种 。 例 如 ， 输 入 百度 网 址 http://www.baidu.com， 如 图 1-13 所 示 。 


1.2.6 域名 


域名 类 似 于 Internet 上 的 门牌 号 ， 是 用 于 识别 和 定位 互联 网 上 计算 机 的 层次 结构 式 字符 标 
识 ， 与 该 计算 机 的 因特网 协议 GP) 地 址 相对 应 。 但 相对 于 卫 地 址 而 言 ， 更 便于 使 用 者 理解 和 
记忆 。URL 和 域名 是 两 个 不 同 的 概念 ， 如 http:/www.sohu.com/ 是 URL， 而 www.sohu.com 是 
域名 ， 如 图 1-14 所 示 。 
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图 1-13 URL 地 址 图 1-14 搜狐 首页 


14.2.7 IP 地 址 


IP(Internet Protocol) 即 因特网 协议 ， 是 为 计算 机 网 络 相 互 连 接 进行 通信 而 设计 的 协议 ， 是 
计算 机 在 因特网 上 进行 相互 通信 时 应 当 遵守 的 规则 。IP 地 址 是 给 因特网 上 的 每 台 计 算 机 和 其 
他 设备 分 配 的 一 个 唯一 的 地 址 。 使 用 ipconfig 命令 可 以 查看 本 机 的 他 地 址 ， 如 图 1-15 所 示 。 


1.2.8 ”上传 与 下 载 


上 传 (Upload) 是 从 本 地 计算 机 (一 般 称 客户 端 ) 向 远程 服务 器 (一 般 称 服务 器 端 ) 传 送 数据 的 
行为 和 过 程 。 下 载 (Download) 是 从 远程 服务 器 取 回 数据 到 本 地 计算 机 的 过 程 。 例 如 ， 将 网 页 
上 的 图 片 保存 到 本 地 计算 机 的 磁盘 当中 就 是 一 种 下 载 方法 ， 如 图 1-16 所 示 。 


ET :HAWindow yctem32 Vemd ee 


图 1-15 查看 IP 地 址 图 1-16 图 片 另存 为 
1.2.9 电子 邮件 


电子 邮件 (E-maiD 是 目前 Internet 上 使 用 最 多 、 最 受 欢迎 的 一 种 服务 。 电 子 邮件 是 利用 计 
算 机 网 络 的 电子 通信 功能 传送 信件 、 单 据 、 资 料 等 电子 媒体 信息 的 通信 方式 ， 它 最 大 的 特点 
是 人 们 可 以 在 任何 时 间 、 任 何 地 点 收发 信件 ， 大 大 地 提高 了 工作 的 效率 ， 为 办 公 自 动 化 、 商 
业 活 动 提供 了 很 大 便利 。 如 图 1-17 所 示 为 163 网 易 邮 箱 登录 界面 。 


210. FTR 


FTP(File Transfer Protocol) 即 文件 传输 协议 ， 是 一 种 快速 、 高 效 和 可 靠 的 信息 传输 方式 ， 
通过 该 协议 可 把 文件 从 一 个 地 方 传 输 到 另 一 个 地 方 ， 从 而 真正 实现 资源 共享 。 制 作 好 的 网 页 
要 上 传 到 服务 器 上 ， 就 要 用 到 FTP。 如 图 1-18 所 示 为 FTP 上 传 工具 的 工作 界面 。 
| 


人 本 
Cae 同时 下 ”| 狗 hupy//mal163.com/ -ac 
身 153 网 居 免 帝 邮 -中 广 姑 粮 
HH WR FBV) SRAN IRM RH 


-ln 


器 二 维 码 梧 录 邮 禄 中 号 王 录 


ECZ3 rl UT FT 


图 1-17 163 网 易 邮 箱 登录 界面 图 1-18 FTP 上 传 工具 


1.3” 跟 我 练 练 手 


1.3.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
1.3.2 上 机 练习 


练习 1: 使 用 浏览 器 浏览 网 页 。 
练习 2: 使 用 电子 邮件 发 送信 件 。 


14 高 手 甜点 


甜点 1: 在 网 页 设计 中 如 何 使 用 图 像 


图 像 内 容 应 有 一 定 的 实际 作用 ， 切 忌 虚 饰 浮 夺 。 图 像 可 以 弥补 文字 之 不 足 ， 但 并 不 能 够 
完全 取代 文字 。 很 多 用 户 把 浏览 软件 设 定 为 略 去 图 像 ， 只 看 文字 ， 以 求 节省 时 间 。 因 此 ， 在 
制作 主页 时 必须 注意 将 图 像 所 表达 的 重要 信息 或 链接 到 其 他 页 面 的 指示 用 文字 重复 表达 几 
次 ， 同 时 要 注意 避免 使 用 过 大 的 图 像 。 如 果 不 得 不 放置 大 的 图 像 在 网 站 上 ， 应 该 把 图 像 缩小 
版 本 的 预览 效果 显示 出 来 ， 这 样 用 户 就 不 必 浪 费 金 钱 和 时 间 去 下 载 他 们 根本 不 想 看 的 大 图 像 。 


二 > 小 了 其 到 _ 翰 上 游 旱 
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甜点 2: 网 页 设计 对 HTML 编码 的 要 求 高 吗 


为 了 成 功 地 设计 网 站 ， 必 须 理解 HTML 是 如 何 工 作 的 。 建 议 新 手 应 从 HTML 的 书 中 寻找 
答案 ， 用 记事 本 制作 网 页 。 因 为 用 HTML 设计 网 站 ， 可 以 控制 设计 的 整个 过 程 。 


HTML 即 超 文本 标记 语言 ， 是 一 种 用 来 制作 超 文 本 文档 的 简单 标记 语言 ， 是 一 
种 应 用 非常 广泛 的 网 页 格式 ， 也 是 被 用 来 显示 Web 页 面 的 语言 之 一 。 可 以 说 ， 一 
个 网 页 对 应 于 一 个 HTML 文件 ，HTML 文件 以 .htm 或 .html 为 扩展 名 ， 可 以 使 用 任 
何 能 够 生成 TXT 类 型 源 文件 的 文本 编辑 器 来 编辑 HTML 文件 。 


网 页 设计 与 网 站 建设 
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2.1 网 页 的 HTML 构成 


在 一 个 HTML 文档 中 ， 必 须 包 含 <ZHTML></HTMIL> 标 签 ， 并 且 放 在 一 个 HTML 文档 中 
的 开始 和 结束 位 置 ， 即 每 个 文档 以 <HTML> 开 始 ， 以 </HTML> 结 束 。<HTIML></HTML> 之 间 
通常 包含 两 个 部 分 ， 分 别 是 <ZHEAD></HEAD> 和 <BODY></BODY>。HEAD 标签 中 包含 
HTML 头 部 信息 ， 如 文档 标题 、 样 式 定义 等 。BODY 标签 中 包含 文档 主体 部 分 ， 即 网 页 内 
容 。 需 要 注意 的 是 ，HTML 标签 不 区 分 大 小 写 。 

为 了 便于 读者 从 整体 上 把 握 HTML 文档 结构 ， 下 面 通过 一 个 HTML 页 面 来 介绍 其 整体 结 
构 ， 示 例 代码 如 下 。 


<!DOCTYPE HTML> 

<HTML> 

<HEAD> 
<TITLE> 网 页 标题 </TITLE> 

</HEAD> 

<BODY> 


网 页 内 容 

</BODY> 

</HTML> 

从 上 面 的 代码 可 以 看 出 ， 一 个 基本 的 HTML 页 面 由 以 下 几 个 部 分 构成 。 

(1) <!IDOCTYPE> 声 明 必须 位 于 HTML5 文档 中 的 第 一 行 ， 也 就 是 位 于 <HTML> 标 签 之 
前 。 该 标签 告知 浏览 器 文档 所 使 用 的 HTML 规范 。<!DOCTYPE> 声 明 不 属于 HTML 标签 ， 它 
是 一 条 指令 ， 告 诉 浏 览 器 编写 页 面 所 用 的 标签 的 版 本 。 

(2) <HTML></HTML> 说 明 本 页 面 使 用 HTML 语言 编写 ， 使 浏览 器 软件 能 够 准确 无 误 地 
解释 、 显 示 。 

(3) <HEAD></HEAD> 是 HTML 的 头 部 标签 ， 头 部 信息 不 显示 在 网 页 中 ， 在 此 标签 内 可 
以 保护 其 他 标签 ， 用 于 说 明文 件 标题 和 整个 文件 的 一 些 公 用 属性 。 可 以 通过 <STYLE> 标 签 定 
义 CSS 样式 表 ， 通 过 <SCRIPT> 标 签 定义 JavaScript 脚本 文件 。 

(4) <TITLE></TITLE> 是 HEAD 中 的 重要 组 成 部 分 ， 它 包含 的 内 容 显示 在 浏览 器 的 窗口 
标题 栏 中 。 如 果 没 有 TITLE， 浏 览 器 标题 栏 将 显示 页 面 的 文件 名 。 

(5) <BODY></BODY> 包 含 HTML 页 面 的 实际 内 容 ， 显 示 在 浏览 器 窗口 的 客户 区 中 。 例 
如 ， 页 面 中 的 文字 、 图 像 、 动 画 、 超 链接 以 及 其 他 HTML 相关 内 容 都 定义 在 BODY 标签 中 。 


2.1.1 文档 标签 


基本 HTML 的 页 面 以 ZHTML> 标 签 开 始 ， 以 </HTML> 标 签 结束 。HTML 文档 中 的 所 有 内 
容 都 应 该 在 这 两 个 标签 之 间 。 空 结构 在 正 中 的 显示 是 空白 的 。 
<HTMIL> 标 签 的 语法 格式 如 下 。 


<HTML> 


</HTML> 


2.1.2 ” 头 部 标签 


头 部 标签 (<HEAD>...</HEAD>) 包 含 文档 的 标题 信息 ， 如 标题 、 关 键 字 、 说 明 以 及 样式 
等 。 除 了 <TITLE> 标 题 外 ， 位 于 头 部 的 内 容 一 般 不 会 直接 显示 在 浏览 器 中 ， 而 是 通过 其 他 方 
式 显示 。 


1. 内 容 


头 部 标签 中 可 以 嵌 套 多 个 标签 ， 如 <TITLE>、<BASE>、<ISINDEX>、<SCRIPT> 等 ,也 
可 以 添加 任意 数量 的 属性 ， 如 <SCRIPT>、<STYLE>、<META> 或 <OBJECT>。 除 了 <TITLE> 
外 ， 其 他 嵌入 标签 可 以 使 用 多 个 。 


2. 位 置 


在 所 有 的 HIML 文档 中 ， 头 部 标签 都 不 可 或 缺 ， 但 结束 标签 可 省 略 。 在 各 个 HIML 版 本 的 
文档 中 ， 头 部 标签 后 一 直 紧 跟 <BODY> 标 签 ， 但 在 框架 设置 文档 中 ， 其 后 跟 的 是 <FRAMESET> 
标签 。 


3. 属性 


<HEAD> 标 签 的 属性 PROFILE 给 出 了 元 数据 描写 的 位 置 ， 说 明 其 中 的 <META> 和 
<LIND> 元 素 的 特性 ， 该 属性 的 形式 没有 严格 的 格式 规定 。 


2.1.3 主体 标签 


主体 标签 (<PBODY>...</BODY>) 包 含 文档 的 内 容 ， 用 若干 个 属性 来 规定 文档 中 显示 的 背 
景 和 颜色 。 
主体 标签 可 能 用 到 的 属性 如 下 。 
e@ BACKGROUND=URL: 文档 的 背景 图 像 ，URL 指 图 像 文件 的 路 径 。 
BGCOLOR=Color: 文档 的 背景 色 。 
TEXT=Color: 文本 颜色 。 
LINK=Color: 链接 颜色 。 
VLINK=Color: 已 访问 的 链接 颜色 。 
ALINK=Color: 被 选中 的 链接 颜色 。 
ONLOAD=Script: 文档 已 被 加 载 。 
ONUNLOAD=Script: 文档 已 退出 。 
为 该 标签 添加 属性 的 代码 格式 如 下 。 


<BODY BACKGROUND="URL " BGCOLOR="Color "> 


浔 胖 中 碧 1NLH 一 一 前 筑 沼 台风 注 _ 翰 乙 游 
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</BODY> 
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2.2 HTML 常用 标签 


HTML 文档 是 由 标签 组 成 的 文档 ， 要 熟练 掌握 HTML 文档 的 编写 ， 首 先 就 是 了 解 HTML 
的 常用 标签 。 


2.2.1 标题 标签 <h1> 一 <h6> 


在 HTML 文档 中 ， 文 本 的 结构 除了 以 行 和 段 出 现 之 外 ， 还 可 以 作为 标题 存在 。 通 常 一 篇 
文档 最 基本 的 结构 就 是 由 若干 不 同 级 别 的 标题 和 正文 组 成 。 

HTML 文档 中 包含 有 各 种 级 别 的 标题 ， 各 种 级 别 的 标题 由 <h1l> 一 <h6> 元 素来 定义 ， 
<hl> 一 <h6> 标 题 标签 中 的 字母 h 是 英文 headline( 标 题 行 ) 的 简称 。 其 中 <h1> 代 表 1 级 标题 ， 级 
别 最 高 ， 文 字 也 最 大 ， 其 他 标题 元 素 依次 递减 ，<h6> 级 别 最 低 。 

下 面 给 出 一 个 实例 ， 来 具体 介绍 标题 标签 的 使 用 方法 。 

【 例 2.1】 标题 标签 的 使 用 (实例 文件 : ch02\2.1.htmD。 


<html> 

<head> 
<title> 文 本 段 换行 </title> 
</head> 

<body> 

<h1> 这 里 是 1 级 标题 </h1> 
<h2> 这 里 是 2 级 标题 </h2> 
<h3> 这 里 是 3 级 标题 </h3> 
<h4> 这 里 是 4 级 标题 </h4> 
<h5> 这 里 是 5 级 标题 </h5> 
<h6> 这 里 是 6 级 标题 </h6> 
</body> 

</html> 


将 上 述 代码 输入 记事 本 ， 并 以 后 级 名 为 .html 的 格式 保存 ， 然 后 在 IE 中 预览 效果 ， 如 
2-1 所 示 。 
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这 里 是 2 级 标题 


这 里 是 3 级 标题 
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2-1 ”标题 标签 的 使 用 


作为 标题 ， 它 们 的 重要 性 是 有 区 别 的 ， 其 中 <hl> 标 题 的 重要 性 最 高 ，<h6> 标 
| 长 题 的 重要 性 最 低 。 
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2.2.2 ”段落 标签 <p> 


段落 标签 <p> 用 来 定义 网 页 中 的 一 段 文本 ， 文 本 在 一 个 段落 中 会 自动 换行 。 段 落 标签 是 双 
标签 ， 即 <p></p>， 在 <p> 开 始 标签 和 </p> 结 束 标 签 之 间 的 内 容 形成 一 个 段落 。 如 果 省 略 结束 
标签 ， 从 <p> 标 签 开 始 ， 直 到 遇见 下 一 个 段落 标签 之 前 的 文本 ， 都 在 一 个 段落 内 。 段 落 标签 中 
的 p 是 英文 单词 paragraph( 段 落 ) 的 首 字母 。 

下 面 给 出 一 个 实例 ， 来 具体 介绍 段落 标签 的 使 用 方法 。 

【 例 2.2】 段落 标签 的 使 用 (实例 文件 ，ch02W2.2.html)。 


<html> 

<head> 

<title> 段 落 标 签 的 使 用 </title> 

</head> 

<body> 

<p> 白 雪 公 主 与 七 个 小 矮人 !</p> 

<p> 很 久 以 前 ， 白 雪 公主 的 后 母 一 王后 美貌 盖世 ， 但 魔 镜 却 告诉 她 世上 唯 有 白雪 公主 最 漂亮 ， 王 后 怒 
火 中 烧 ， 派 武士 把 她 押送 到 森林 准备 谋害 ， 武 士 同情 白雪 公主 ， 让 她 逃 往 森林 深 处 。 

</p> 


<p> 

小 动物 们 用 善良 的 心 抚慰 她 ， 鸟 兽 们 还 把 她 领 到 一 间 小 屋 中 ， 收 拾 完 房间 后 她 进入 了 梦乡 。 房 子 的 主人 
是 在 外 边 开 矿 的 七 个 小 矮人 ， 他 们 听 了 白雪 公主 的 诉说 后 把 她 留 在 家 中 。 

</p> 


<p> 

王后 得 知 白雪 公主 未 死 ， 便 用 魔 镜 把 自己 变 成 一 个 老太婆 ， 来 到 密林 深 处 ， 哄 骗 白 雪 公 主 吃 下 一 只 有 毒 
的 苹果 ， 使 公主 昏 死 过 去 。 鸟 儿 识破 了 王后 的 伪装 ， 飞 到 矿山 报告 白雪 公主 的 不 幸 。 七 个 小 矮人 火速 赶 
回 ， 王 后 仓皇 逃跑 ， 在 狂风 暴雨 中 跌 下 山崖 摔 死 。 

</p> 

<p> 

七 个 小 矮人 悲痛 万 分 ， 把 白雪 公主 安放 在 一 只 水 晶 棺 里 日 日 夜 夜 守护 着 她 。 邻 国 的 王子 闻 讯 ， 骑 着 白马 
赶 来 ， 爱 情 之 吻 使 白雪 公主 死 而 复生 。 然 后 王子 带 着 白雪 公主 骑 上 白马 ， 告 别 了 七 个 小 矮人 和 森林 中 的 
动物 ， 到 王子 的 宫殿 中 开始 了 幸福 的 生活 。 

</p> 

a 

</html> 


将 上 述 代码 输入 记事 本 ， 并 以 后 缀 名 为 .html 的 格式 保存 ， 然 后 在 下 中 预览 效果 ， 如 图 
2-2 所 示 ， 可 以 看 出 <p> 标 签 将 文本 分 成 标题 与 4 个 段落 。 
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小 超人 用 委 的 心 拭 轩 她， 马 轨 们 江 扣 她 半 细 一 合 小 尾 中 ， 忆 接 守 所 后 好 丢人 了 
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天 后 天 白人 未 宛 ， 便 用 和 请 基 自己 主 蕊 一 老 二 要 ， 直 到 二 慎 下 引 水 半 和 到 
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二 个 小 咕 人 区 病人， 把 白 本 公主 才 在 一 只 水 昌 术 时 杰 普宁 从 洗 狂 ， 寺 国 的 王 
子 二 中 和 者 电 下 二 ， 复 全 二 示 癸 室 公 王 更 帮 复生 。 兴 司 主 子 季 壬 委 人 王将 上 
下 忆 ， 千 了 七 个 小 每 和 和 入 入 中 的 示 物 ， 到 二 了 的 言 志 中 下 站 了 幸福 的 生 法 - 
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2.2.3 ”换行 标签 <br> 


使 用 换行 标签 <br> 可 以 对 文字 强制 换行 ， 该 标签 是 一 个 单 标签 ， 它 没有 结束 标签 ， 是 英 
文 单词 break 的 缩写 。 一 个 <br> 标 签 代表 一 个 换行 ， 连 续 的 多 个 标签 可 以 实现 多 次 换行 。 使 用 
换行 标签 时 ， 在 需要 换行 的 位 置 添加 <br> 标 签 即 可 。 

下 面 给 出 一 个 实例 ， 来 具体 介绍 换行 标签 的 使 用 方法 。 

【 例 2.3】 换 行 标签 的 使 用 (实例 文件 : ch02\2.3.htmD。 


<html> 

<head> 
<title> 文 本 段 换 行 </title> 
</head> 

<body> 

清明 <br/> 

清明 时 节 雨 纷纷 <br/> 
路 上 行人 和 欲 断 魂 <br/> 
借 问 酒家 何 处 有 <br/> 
牧童 遥 指 杏 花 村 
</body> 

</html> 


将 上 述 代 码 输入 记事 本 ， 并 以 后 级 名 为 .html 的 格式 保存 ， 然 后 在 下 中 预览 效果 ， 如 
图 2-3 所 示 。 
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图 2-3 ”换行 标签 的 使 用 
2.2.4 ”链接 标签 <a> 


链接 标签 <a> 是 网 页 中 最 为 常用 的 标签 ， 主 要 用 于 把 页 面 中 的 文本 或 图 片 链接 到 其 他 的 页 
面 、 文 本 或 图 片 。 建 立 链接 有 两 个 最 重要 的 要 素 ， 即 设置 为 链接 的 网 页 元 素 和 链接 指向 的 目 
标 地 址 。 基 本 的 链接 结构 如 下 。 


<a href=URL> 网 页 元 素 </a> 


1. 文本 和 图 片 链接 


设置 链接 的 网 页 元 素 通常 使 用 文本 和 图 片 。 文 本 链接 和 图 片 链接 是 通过 <a></a> 标 签 实现 
的 ， 将 文本 或 图 片 放 在 <a> 开 始 标签 和 </a> 结 束 标签 之 间 即 可 建立 文本 或 图 片 链接 。 


【 例 2.4】 设 置 文本 和 图 片 链接 (实例 文件 : ch022.4.html)。 
打开 记事 本 文件 ， 在 其 中 输入 如 下 HTML 代码 。 


<html> 

<head> 

<title> 文 本 和 图 片 链接 </title> 

</head> 

<body> 

<a href="a.html"><img src="images/Logo.gif"></a> 
<a href="b.html"> 公 司 简介 </a> 

</body> 

</html> 


代码 输入 完成 ， 将 其 保存 为 “链接 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 浏览 器 中 查 
看 应 用 链接 标签 后 的 效果 ， 如 图 2-4 所 示 。 


2. 电子 邮件 链接 


电子 邮件 链接 用 来 链接 一 个 电子 邮件 的 地 址 。 下 面 是 电子 邮件 链接 可 以 使 用 的 写法 。 
mailto: 邮 件 地 址 


【 例 2.$】 设 置 电子 邮件 链接 (实例 文件 : ch02\2.5.html)。 
打开 记事 本 文件 ， 在 其 中 输入 如 下 HTML 代码 。 


<html> 

<head> 

<title> 电 子 邮 件 链接 </title> 

</head> 

<body> 

使 用 电子 邮件 链接 : <a href="mailto:1iule2012@163.com"> 链 接 </a> 
</body> 

</html> 


代码 输入 完成 ， 将 其 保存 为 “电子 邮件 链接 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 浏 
览 器 中 查看 应 用 电子 邮件 链接 后 的 效果 。 当 单 击 含 有 链接 的 文本 时 ， 会 弹出 邮件 发 送 窗口 ， 
如 图 2-5 所 示 。 
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图 2-4 文本 与 图 片 链 接 图 2-5 电子 邮件 链接 
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2.2.5 ”列表 标签 <ul> 


文字 列表 可 以 有 序 地 编排 一 些 信息 资源 ， 使 其 结构 化 和 条 理化 ， 并 以 列表 的 样式 显示 出 
来 ， 以 便 浏览 者 能 更 加 快捷 地 获得 相应 信息 。HTML 中 的 文字 列表 如 同文 字 编辑 软件 Word 
中 的 项 目 符号 和 自动 编号 。 


1. 建立 无 序列 表 


无 序列 表 相 当 于 Word 中 的 项 目 符号 ， 无 序列 表 的 项 目 排列 没有 顺序 ， 只 以 符号 作为 分 
项 标识 。 无 序列 表 使 用 一 对 标签 <ul></ul>， 其 中 每 一 个 列表 项 使 用 <li></li>， 其 结构 如 下 。 


<ul> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 


</ul> 


在 无 序列 表 结构 中 ， 使 用 <ul></ul> 标 签 表示 这 一 个 无 序列 表 的 开始 和 结束 ，<l> 则 表示 
一 个 列表 项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 ， 并 且 <li> 可 以 省 略 结束 标签 。 

下 面 给 出 的 实例 使 用 无 序列 表 实 现 文本 的 排列 显示 。 

【 例 2.6】 建 立 无 序列 表 ( 实 例文 件 : ch02\2.6.html)。 

打开 记事 本 文件 ， 在 其 中 输入 如 下 HTML 代码 。 


<html> 
<head> 
<tit1le> 嵌 套 无 序列 表 的 使 用 </title> 
</head> 
<body> 
<h1> 网 站 建设 流程 </h1> 
<ul> 
<1i> 项 目 需求 </1i> 
<1i> 系 统 分 析 
<ul> 
<1i> 网 站 的 定位 </1i> 
<1i> 内 容 收 集 </1i> 
<1i> 栏 目 规划 </1i> 
<1i> 网 站 目录 结构 设计 </1i> 
<1i> 网 站 标志 设计 </1i> 
<1i> 网 站 风格 设计 </1i> 
<1i> 网 站 导航 系统 设计 </1i> 
</ul> 
</1i> 
<1i> 伪 网 页 草图 
<ul> 
<1i> 制 作 网 页 草图 </1i> 
<1i> 将 草图 转换 为 网 页 </1i> 


</ul> 


</1i> 
<1i> 站 点 建设 </1i> 
<1i> 网 页 布局 </1i> 
<1i> 网 站 测试 </1i> 
<1i> 站 点 的 发 布 与 站 点 管理 </1i> 
</ul> 
</body> 
</html> 


代码 输入 完成 ， 将 其 保存 为 “无 序列 表 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 浏览 器 
中 查看 应 用 无 序列 表 后 的 效果 了 ， 如 图 2-6 所 示 。 读 者 会 发 现 ， 在 无 序列 表 项 中 可 以 嵌 套 一 
个 列表 。 如 代码 中 的 “系统 分 析 ” 列 表 项 和 “ 伪 网 页 草图 ”列表 项 中 都 有 下 级 列表 ， 因 此 在 
这 对 <li></i> 标 签 间 又 增加 了 一 对 <ul></ul> 标 签 。 


2. 建立 有 序列 表 


有 序列 表 类 似 于 Word 中 的 自动 编号 功能 。 有 序列 表 的 使 用 方法 和 无 序列 表 的 使 用 方法 
基本 相同 ， 它 使 用 标签 <ol></ol>， 每 一 个 列表 项 前 使 用 <li></i> 。 每 个 项 目 都 有 前 后 顺序 之 
分 ， 多 数 用 数字 表示 ， 其 结构 如 下 。 


<ol> 
<1i> 第 1 项 </1i> 
<1i> 第 2 项 </1i> 
<1i> 第 3 项 </1i> 
</o1> 


下 面 给 出 的 实例 使 用 有 序列 表 实现 文本 的 排列 显示 。 
【 例 2.7】 建 立 有 序列 表 (实例 文件 : ch02\2.7.html)。 
打开 记事 本 文件 ， 在 其 中 输入 如 下 HTML 代码 。 


<html> 

<head> 

<title> 有 序列 表 的 使 用 </title> 

</head> 

<body> 

<h1> 本 讲 目 标 </h1> 

<ol> 
<1i> 网 页 的 相关 概念 </1i> 
<1i> 网 页 与 HTML</1i> 
<1i>Web 标准 (结构 、 表 现 、 行 为 ) </1i> 
<1i> 网 页 设计 与 开发 的 过 程 </1i> 
<1i> 与 设计 相关 的 技术 因素 </1i> 
<1i>HTML 简介 </1i> 

</ol> 

</body> 

</html> 


代码 输入 完成 ， 将 其 保存 为 “有 序列 表 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 浏览 器 
中 查看 应 用 有 序列 表 后 的 效果 ， 如 图 2-7 所 示 。 
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2.2.6 ”图像 标 签 <img> 


图 像 可 以 美化 网 页 ， 插 入 图 像 使 用 单 标签 <img>。<img> 标 签 的 属性 及 描述 如 表 2-1 所 示 。 
表 2-1 <img> 标 签 的 属性 及 描述 
属 性 描述 
alt | text | 定义 有 关 图 像 的 短 的 描述 


要 要 显示 的 图 像 的 URL 
eit 定义 图 像 的 高 度 


i URL 把 图 像 定义 为 服务 器 端的 图 像 映射 
i 定义 作为 客户 端 图 像 映射 的 一 幅 图 像 
width 定义 图 像 的 宽度 

1. 插入 图 像 


src 属性 用 于 指定 图 像 源 文件 的 路 径 ， 它 是 <img> 标 签 必 不 可 少 的 属性 。 其 语法 格式 如 下 。 
<img src=" 图 像 路 径 "> 


图 像 路 径 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 
下 面 给 出 的 实例 将 在 网 页 中 插入 图 像 。 

【 例 2.8】 插 入 图 像 (实例 文件 : ch02\2.8.html)。 
打开 记事 本 文件 ， 在 其 中 输入 如 下 HTML 代码 。 


<html> 

<head> 

<title> 插 入 图 像 </title> 
</head> 

<body> 

<img src="images/meishi.jpg"> 
</body> 

</html> 


oa 


| 
第 
代码 输入 完成 ， 将 其 保存 为 “插入 图 像 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 浏览 器 间 
中 查看 插入 图 像 后 的 效果 ， 如 图 2-8 所 示 。 出 
2. 从 不 同位 置 插入 图 像 间 
在 插入 图 像 时 ， 用 户 可 以 将 其 他 文件 夹 或 服务 器 的 图 像 插 入 到 网 页 中 。 型 
【 例 2.9】 从 不 同位 置 插入 图 像 (实例 文件 ，ch02W2.9.html)。 融 
打开 记事 本 文件 ， 在 其 中 输入 如 下 HTML 代码 。 小 
<html> 二 
<body> 语 
<p> 言 
来 自 一 个 文件 夹 的 图 像 : 速 
<img src="images/meishi.jpg"/> 所 
</p> 
<p> 
来 自 baidu 的 图 像 : 
<img 


src="http://www.baidu.com/img/shouye b5486898c692066bd2cbaeda86d74448.gif" 
/> 

</p> 

</body> 

</html> 


代码 输入 完成 ， 将 其 保存 为 “插入 其 他 位 置 图 像 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 
在 浏览 器 中 查看 插入 图 像 后 的 效果 ， 如 图 2-9 所 示 。 
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图 2-8 插入 图 像 图 2-9 从 不 同位 置 插入 图 像 
3. 设置 图 像 在 页 面 中 的 宽度 和 高 度 
在 HIML 文档 中 ， 还 可 以 设置 插入 图 像 的 显示 大 小 。 图 像 一 般 是 按 原始 尺寸 显示 ， 但 也 
可 以 任意 设置 显示 尺寸 。 设 置 图 像 的 宽度 和 高 度 分 别 使 用 属性 width( 宽 度 ) 和 height( 高 度 )。 
【 例 2.10】 设置 图 像 在 网 页 中 的 宽度 和 高 度 ( 实 例文 件 : ch02\2.10.html)。 
打开 记事 本 文件 ， 在 其 中 输入 如 下 HTML 代码 。 


<html> 
<head> 
<title> 插 入 图 像 </title> 
</head> 


网 页 设计 与 网 站 建设 
案例 课堂 ~ 


<body> 

<img src="images/01.jpg"> 

<img src="images/01.jpg" width="200"> 

<img src="images/01.jpg" width="200" height="300"> 
</body> 

</html> 


代码 输入 完成 ， 将 其 保存 为 “设置 图 像 大 小 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 浏 
览 器 中 查看 插入 图 像 后 的 效果 ， 如 图 2-10 所 示 。 


图 2-10 设置 图 像 的 高 度 与 宽度 
由 图 2-10 可 以 看 到 ， 图 像 的 显示 尺寸 是 由 width( 宽 度 ) 和 height( 高 度 ) 值 控制 的 。 当 只 为 
图 像 设 置 一 个 尺寸 属性 时 ， 另 外 一 个 尺寸 就 以 图 像 原始 的 长 宽 比 例 来 显示 。 图 像 的 尺寸 单位 
可 以 选择 百分比 或 数值 。 百 分 比 为 相对 尺寸 ， 数 值 为 绝对 尺寸 。 


@: 在 网 页 中 插入 的 图 像 都 是 位 图 ， 放 大 尺寸 时 ， 图 像 中 会 出 现 马 赛 克 ， 图 像 变 得 
| 长 模糊。 

意 
3 在 Windows 中 查看 图 像 的 尺寸 ， 只 需要 找到 图 像 文件 ， 把 鼠标 指针 移动 到 图 像 


外 。 上 ， 停留 几 秒 后 ， 就 会 出 现 一 个 提示 框 ， 说 明 图 像 文件 的 尺寸 。 尺 寸 后 显示 的 数字 代 
表 图 像 的 宽度 和 高 度 ， 如 256x256。 


2.2.7 表格 标签 <table> 


在 HIML 中 用 于 标识 表格 的 标签 如 下 。 

e@ ” <table> 标签 用 于 标识 一 个 表格 对 象 的 开始 ，</table> 标 签 用 于 标识 一 个 表格 对 象 的 结 
东 。 一 个 表格 中 只 允许 出 现 一 对 <table> 标 签 。 

e@ ”<tr> 标签 用 于 标识 表格 一 行 的 开始 ，</tr> 标 签 用 于 标识 表格 一 行 的 结束 。 表 格 内 有 
多 少 对 <tr></tr> 标 签 ， 就 表示 表格 中 有 多 少 行 。 

e@ ”<td> 标 签 用 于 标识 表格 某 行 中 的 一 个 单元 格 开 始 ，</td> 标 签 用 于 标识 表格 某 行 中 的 
一 个 单元 格 结束 。<td></td> 标 签 书写 在 <tr></tr> 标 签 内 ， 一 对 <tr></tr> 标 签 内 有 多 少 
对 <td></td> 标 签 ， 就 表示 该 行 有 多 少 个 单元 格 。 

最 基本 的 表格 必须 包含 一 对 <table></table> 标 签 、 一 对 或 几 对 <tr></t> 标 签 以 及 一 对 或 几 

对 <td></td> 标 签 。 一 对 <table></table> 标 签 定义 一 个 表格 ， 一 对 <tr></tr> 标 签 定义 一 行 ， 一 对 
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<td></td> 标 签 定义 一 个 单元 格 。 
【 例 2.11】 定 义 一 个 4 行 3 列 的 表格 (实例 文件 : ch02\2.11.htmD)。 
打开 记事 本 文件 ， 在 其 中 输入 如 下 HTML 代码 。 


<html> 
<head> 
<title> 表 格 基本 结构 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td>Al</td> 
<td>Bl</td> 
<td>C1</td> 
</tr> 
<tr> 
<td>A2</td> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 


代码 输入 完成 ， 将 其 保存 为 “表格 html” 文件 ，。 二 二 0 
然后 双击 该 文件 ， 就 可 以 在 浏览 器 中 查看 插入 表格 后 。 | [wuswanna P- ex 
的 效果 ， 如 图 2-11 所 示 。 RE 
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2.2.8 框架 标签 <frame> 后 臣下 


[Ad lB4a C4 


框架 通常 用 来 定义 页 面 的 导航 区 域 和 内 容 区 域 。 
使 用 框架 最 常见 的 情况 就 是 : 一 个 框架 用 于 显示 包含 
导航 栏 的 文档 ， 而 另 一 个 框架 用 于 显示 含有 内 容 的 文 
档 。 框 架 是 网 页 中 最 常用 的 页 面 设计 方式 ， 很 多 网 站 都 使 用 了 框架 技术 。 

框架 页 面 中 最 基本 的 内 容 就 是 框架 集 文件 ， 它 是 整个 框架 页 面 的 导航 文件 ， 其 基本 语法 
如 下 。 

<html> 


<head> 


<title> 框 架 页 面 的 标题 </title> 


2-11 表格 标签 的 使 用 


网 页 设计 与 网 站 建设 
案例 课堂 ~ 


</head> 

<frameset> 
<frame> 
<frame> 


A ene 

</html> 

从 上 面 的 语法 结构 中 可 以 看 到 ， 在 使 用 框架 的 页 面 中 ，<body> 主 体 标签 被 框架 标签 
<frameset> 所 代替 。 而 框架 页 面 中 包含 的 每 一 个 框架 ， 都 是 通过 <frame> 标 签 来 定义 的 。 


@u 不 能 将 <body></body> 标 签 与 <frameset></frameset> 标 签 同 时 使 用 。 不 过 ， 假 如 要 
站 注 添加 包含 一 段 文 本 的 <noframes> 标 签 ， 就 必须 将 这 段 文本 庶 套 于 <body></body> 标 
签 内 。 


混合 分 割 窗 口 是 指 在 一 个 页 面 中 ， 既 有 水 平分 割 的 框架 ， 又 有 垂直 分 割 的 框架 。 其 语法 
结构 如 下 。 

<frameset rows=" 框 架 窗口 的 高 度 , 框架 窗口 的 高 度 ，……:"> 

<frame> 

<frameset cols=" 框 架 窗口 的 宽度 ,框架 窗口 的 宽度 ，…… > 

<frame> 

<frame> 


</frameset> 
<frame> 


</frameset> 
当然 ， 也 可 以 先进 行 垂 直 分 割 ， 再 进行 水 平分 割 。 其 语法 结构 如 下 。 
<frameset cols=" 框 架 窗口 的 宽度 ,框架 窗口 的 宽度 ，…… 人 


<frame> 


<frameset rows=" 框 架 窗口 的 高 度 , 框架 窗口 的 高 度 , ……"> 
<frame> 
<frame> 


</frameset> 
<frame> 


</frameset> 


> 在 设置 框架 窗口 时 ， 一 定 要 注意 窗口 大 小 的 设置 与 窗口 个 数 的 统一 。 
注 
EE 


【 例 2.12】 将 一 个 页 面 分 割 成 不 同 的 框架 (实例 文件 :ch02\2.12.html)。 
打开 记事 本 文件 ， 在 其 中 输入 如 下 HTML 代码 。 


<html> 

<head> 

<title> 混 合 分 割 窗 口 </title> 
</head> 

<frameset rows="30%,70%"> 


<frame> 

<frameset cols="20%,55%,25%"> 
<frame> 

<frame> 

<frame> 

</frameset> 

</frameset> 

</html> 


由 代码 可 以 看 出 ， 其 首先 将 页 面 水 平分 割 成 上 下 两 个 窗口 ， 接 着 下 面 的 框架 又 被 垂直 分 
割 成 三 个 窗口 。 因 此 ， 下 面 的 框架 标签 <frame> 被 框架 集 标签 代替 。 运 行程 序 ， 效 果 如 图 2-12 
所 示 。 
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图 2-12 ”框架 标签 的 使 用 


2.2.9 表单 标签 <form> 


表单 主要 用 于 收集 网 页 浏览 者 的 相关 信息 ， 其 标签 为 <form></form>。 表 单 标签 的 基本 语 
法 格式 如 下 。 


<form action="url" method="get|post" enctype="mime"> 
</form > 


其 中 ，action="url" 指 明 提 交 表 单 时 向 何 处 发 送 数 据 ， 它 可 以 是 一 个 URL 地 址 或 一 个 电子 
邮件 地 址 。method="get | post" 指 明 提 交 表单 的 HTTP 方法 。enctype="mime" 指 明 在 把 表单 提交 
给 服务 器 之 前 如 何 对 表单 进行 编码 。 表 单 是 一 个 能 够 包含 表单 元 素 的 区 域 。 通 过 添加 不 同 的 
表单 元 素 ， 将 显示 不 同 的 效果 。 

下 面 给 出 一 个 具体 的 实例 ， 即 开发 一 个 简单 的 网 站 用 户 意见 反馈 页 面 。 

【 例 2.13】 用 户 意见 反馈 页 面 (实例 文件 ，ch02\2.13.html)。 

打开 记事 本 文件 ， 在 其 中 输入 如 下 HTML 代码 。 


<html> 

<head> 

<title> 用 户 意见 反馈 页 面 </title> 
</head> 

<body> 

<hl align=center> 用 户 意见 反馈 页 面 </h1> 
<form method="post"> 

<p> 姓 gnbsp; gnbsp; &nbsp; gnbsp; 名 : 


网 页 设计 与 网 站 建设 
案例 课堂 ~ 


<input type="text" class=txt size="12" maxlength="20" name="username"/> 
</p><p> 性 gnbsp; sgnbsp; snbsp; gnbsp; 别 : 

<input type="radio" value="male"/> 男 

<input type="radio" value="female"/> 女 

</p><p> 年 enbsp; gnbsp; &nbsp; gnbsp; 零 : 

<input type="text" class=txt name="age"/> 

</p> 


<p> 联 系 电话 : 

<input type="text" class=txt name="tel"/> 
</p><p> 电 子 邮件 : 

<input type="text" class=txt name="email"/> 
</p><p> 联 系 地 址 : 

<input type="text" class=txt name="address"/> 
</p> 

<p> 

请 输入 您 对 网 站 的 建议 <br> 

<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 


<input type="submit" name="submit" value=" 提 交 "/> 
<input type="reset" name="reset"” value=" 清 除 "/> 
</p> 

</form> 

</body> 

</html> 


代码 输入 完成 ， 将 其 保存 为 “表单 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 浏览 器 中 查 
看 插入 表单 后 的 效果 ， 如 图 2-13 所 示 。 可 以 看 到 页 面 中 创建 了 一 个 用 户 意见 反馈 表单 ， 包 含 
标题 ， 以 及 【姓名 】、【 性 别 】”、【 年 龄 】、【 联 系 电话 】、【 电 子 邮 件 】、【 联 系 地 
址 】、【 请 输入 您 对 网 站 的 建议 】 等 选项 。 
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图 2-13 表单 标签 的 使 用 
2.2.10 注释 标签 <!> 


注释 是 在 HTML 代码 中 插入 的 描述 性 文本 ， 用 来 解释 该 代码 或 提示 其 他 信息 。 注 释 只 出 
现在 代码 中 ， 浏 览 器 对 注释 代码 不 进行 解释 ， 并 且 在 浏览 器 的 页 面 中 不 显示 。 在 HIML 源 代 
码 中 适当 地 插入 注释 语句 是 一 种 非常 好 的 习惯 。 对 于 设计 者 日 后 的 代码 修改 、 维 护 工作 很 有 


全 


好 处 。 另 外 ， 如 果 将 代码 交 给 其 他 设计 者 ， 其 他 人 也 能 很 快 读 懂 原作 者 所 撰写 的 内 容 。 


注释 标签 的 语法 结构 如 下 。 
<! 一 注释 的 内 容 --> 
注释 语句 元 素 由 前 后 两 半 部 分 组 成 ， 前 半 部 分 包括 一 个 左 尖 括号 、 一 个 半角 感叹 号 和 两 


个 连 字 符 头 ， 后 半 部 分 包括 两 个 连 字 符 和 一 个 右 尖 括 号 。 下 面 给 出 一 个 例子 。 


码 。 


>” 


<html> 

<head> 
<title> 标 记 测 试 </title> 
</head> 

<body> 

<!-- 这 里 是 标题 --> 
<h1> 网 站 建设 精 讲 </h1> 
</body> 

</html> 


页 面 注 释 不 但 可 以 对 HTML 中 一 行 或 多 行 代码 进行 解释 说 明 ， 而 且 可 以 注释 掉 这 些 代 
如 果 希 望 某 些 HTML 代码 在 浏览 器 中 不 显示 ， 可 以 将 这 部 分 内 容 放 在 “<! 一 ”和 “一 
间 。 例 如 ， 修 改 上 述 代码 ， 如 下 所 示 。 


<html> 

<head> 
<title> 标 签 测试 </title> 
</head> 


<!-- 

<h1> 网 站 建设 精 讲 </h1> 
一 -> 

</body> 

</html> 


修改 后 的 代码 ， 将 <h1> 标 签 作为 注释 内 容 处 理 ， 在 浏览 器 中 将 不 会 显示 这 部 分 内 容 。 


2.2.11 移动 标签 <marquee> 


Pa 
-提示 


使 用 <marquee> 标 签 可 以 将 文字 设置 为 动态 滚动 的 效果 。 其 语法 结构 如 下 。 


<marquee> 滚 动 文字 </maraquee> 


只 要 在 标签 之 间 添加 要 进行 滚动 的 文字 即 可 ， 而 且 可 以 在 标签 之 间 设置 这 些 文字 
站。 的 字体 、 闫 色 等 。 


【 例 2.14】 制 作 一 个 滚动 的 文字 (实例 文件 : ch02\2.14.htmD 。 
打开 记事 本 文件 ， 在 其 中 输入 如 下 HTML 代码 。 


<html> 

<head> 
<title> 设 置 滚动 文字 </title> 
</head> 

<body> 

<marquee> 


a 
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<font face=" 素 书 " color="#cc0000" size=4> 你 好 ， 欢 迎 光临 五 月 蔷薇 女 裤 专 卖 店 ! 这 里 有 最 

适合 你 的 打 底 裤 ， 这 里 有 最 让 你 满意 的 服务 </font> 

/marquee> 

i 

</html> 

代码 输入 完成 ， 将 其 保存 为 “ 深 动 文字 .html” 文 件 ， 然 后 双击 该 文件 ， 就 可 以 在 浏览 器 
中 查看 滚动 文字 的 效果 ， 如 图 2-14 所 示 ， 可 以 看 到 设置 为 红色 隶书 的 文字 从 浏览 器 的 右 方 组 
缓 向 左 滚动 。 


CD umn- ox Suns 1 
mmN Ra BEV Tam TET Wo 


1 这 里 有 最 适合 你 的 打 


2-14 ”滚动 标签 的 使 用 


2.3 ”实战 演练 一 一 制作 日 程 表 


通过 在 记事 本 中 输入 HTML 语言 ， 可 以 制作 出 多 种 多 样 的 页 面 效 果 。 本 节 以 制作 日 程 表 
为 例 ， 介 绍 HTML 语言 的 综合 应 用 方法 。 

具体 操作 步骤 如 下 。 

EEC 打开 记事 本 ， 在 其 中 输入 如 下 代码 ， 如 图 2-15 所 示 。 


<html> 
<head> 
<META http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 制 作 日 程 表 </title> 


</head> 


<body> 
</body> 
</html> 


META bttp-equinc Comtent -Type” content="tert/htel; charset=sb2312” /» 
nes 宙 作 自生 基 Vr 
hap 


boyy 
co 
> 


图 2-15 在 记事 本 中 输入 代码 


在 </head> 标 签 之 前 输入 如 下 代码 ， 


<style type="text/css"> 
body { 


background-color: #FFD9D9; 
text-align: center; 

} 

</style> 

ESD 在 </style> 标 签 之 前 输入 如 下 代码 ， 
二 


font-family: "方正 粗 活 意 简体 "， "方正 大 黑 简体 "7 


font-size: 36px; 


pe eet ee 


ill 
aryle Type= tort/eas) 


hackeround-color; MIDIDD. 
or al ene enter, 


S/otyley 


2-16 在 记事 本 中 输入 代码 


在 <body>..…</body> 标 签 之 间 输 入 如 下 代码 ， 如 图 2-18 所 示 。 


<span class="ziti"> 一 周 日 程 表 </span> 


过 


如 图 2-16 所 示 。 


陈 洲 _ 二 z 尘 四 
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2-17 在 记事 本 中 输入 代码 


EERD9) 在 <body> 标 签 之 前 输入 如 下 代码 ， 如 图 2-19 所 示 。 


<table width="470"” border="1"” align="center" cellpadding: 


cellspacing="3"> 
<tr> 
<td 
<td 
<td 
<td 
<td 
</tr> 
E> 
<td 


width="84" 
width="84" 
width="86" 
width="83" 
width="83" 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


centers 


center">gnbsp;</td> 
center"> 工 作 一 </td> 
center"> 工 作 二 </td> 
center"> 工 作 三 </td> 
center"> 工 作 四 </td> 


"宋体 ' "> 星期 一 </td> 


<td 
<td 
<td 
<td 
</tr> 
i 
<td 
<td 
<td 
<td 
<td 
As 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


center; font-family: ' 宋 体 ';"> 星 期 二 </td> 
center">gnbsp;</td> 

center">gnbsp;</td> 

center">gnbsp;</td> | 


center">gnbsp;</td> [ 
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tr 


<td 
<td 
<td 
<td 
<td 


</tr> 
<tr> 


<td 
<td 
<td 
<td 
<td 


</tr> 
<tr> 


<td 
<td 
<td 
<td 
<td 


</tr> 
</table> 


El 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 
style="text-align: 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


center; font-family: 
center">gnbsp; </td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


center; font-family: 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 
center">gnbsp;</td> 


和 
rttley 利 人 日程 表 /ML 
i type= textf ca 》 


backgreund-color， 4PFD9D9. 


ai 


) 


eztalignt center, 


Na 方正 大 恢 而 体 ”: 


fonr -efze: 3 


aryley 


/head> 


2 EE 


图 2-18 在 记事 本 中 输入 代码 


区 于 BY 在 记事 本 中 选择 【文件 】 一 【保存 】 菜 单 命令 ， 弹 出 【另存 为 】 对 话 框 ， 设 置 
保存 的 位 置 ， 并 设置 【文件 名 】 为 “制作 日 程 表 .html”， 然 后 单 击 【 保 存 】 按 钮 ， 


如 图 2-20 所 示 。 
双击 打开 保存 的 文件 ， 即 可 看 到 制作 的 日 程 表 ， 如 图 2-21 所 示 。 


Ez 


' 宁 体 ';"> 星 期 三 </td> 


' 宋 体 ';"> 星 期 四 </ta> 


' 宋 体 ';"> 星 期 五 </td> 


cemter” cellpadiing="2" cellepecine=” 


enter Yn sp, rd) 
er 工作 二 (中 


eatcsi fent-fenily! “宋体 ;于 其 一 (ft 由 
center Yrbep, /LD 
eenter Yobep; /td 
;center” YcbsDp, /td 
bt 和 


2-19 在 记事 本 中 输入 代码 


NP-6 


>#n wa 


[Ja epreomweore 
EI 


二 和 WM 这 A TIT 才 mm() 


一 周 日 程 表 


工作 = | 工作 = | 工作 三 


en oar 


Cn [EEC 


2-20 【另存 为 】 对 话 框 


图 2-21 制作 的 日 程 表 


| 


如 果 需 要 在 日 程 表 中 添加 工作 内 容 ， 可 以 用 记事 本 打开 文件 ， 在 <td style="text- 
align: center">&nbsp;</td> 的 &nbsp 之 前 输入 内 容 即 可 。 比 如 要 输入 星期 一 完成 的 第 1 
件 工作 内 容 “ 完 成 校对 ”， 可 以 在 如 图 2-22 所 示 的 位 置 输入 。 

ECESUDp 保存 后 打开 文件 ， 本 省 到 深 如 的 下 作 内 容 ， 如 图 2-23 所 示 。 


le Eo oN 国 PD- 
[aees 
mn RR EV a Ta iH) 


一 周 日 程 表 


工作 一 ][ 工作 = | 工作 三 
Er 


图 2-22 在 记事 本 中 输入 代码 图 2-23 ”修改 后 的 日 程 表 


2.4” 跟 我 练 练 手 


2.4.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 


2.4.2 上 机 练习 


练习 1: HTML 常用 标签 的 使 用 。 
练习 2: 制作 日 程 表 。 


2.5 高 手 甜 点 


甜点 1: HTMLS 中 的 单 标签 和 双 标 签 书写 方法 


HTML5 中 的 标签 分 为 单 标签 和 双 标 签 。 单 标签 没有 结束 标签 ， 双 标签 既 有 开始 标签 ， 又 
结束 标签 。 

对 于 单 标 签 ， 不 允许 给 其 添加 结束 标签 ， 只 人 允许 使 用 “< 元 素 />” 的 形式 进行 书写 。 例 
如 “<br>.….</br>” 的 书写 方式 是 错误 的 ， 正 确 的 书写 方式 为 <br />。 当 然 ， 在 HTML5 之 前 的 
版 本 中 ，<br> 这 种 书写 方式 可 以 被 沿用 。HTML5 中 不 允许 写 结束 标签 的 元 素 有 : area、 
base、 br、 col、 command、embed、hr、img、input、keygen、link、meta、param、 source、 
track、 wbr。 

对 于 部 分 双 标 签 ， 可 以 省 略 其 结束 标签 。HIMLS 中 人 允许 省 略 结束 标签 的 元 素 有 : 
dt、 dd、 p、 rt、 rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。 

在 HTML5 中 ， 有 些 元 素 还 可 以 完全 被 省 略 。 即 使 被 省 略 了 ， 该 元 素 还 是 以 隐 式 的 方式 


浔 膨 中 斑 1NLH 一 一 前 碟 沼 台 峡 注册 z 名 


A 
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存在 。HTMLS 中 人 允许 省 略 全 部 标签 的 元 素 有 : html、head、body、colgroup、tbody。 
甜点 2: 使 用 记事 本 编辑 HTML 文件 的 注意 事项 


很 多 初学 者 在 保存 文件 时 ， 没 有 将 HTML 文件 的 扩展 名 .html 或 .htm 作为 文件 的 后 缀 ， 导 
致 文件 还 是 以 .txt 为 扩展 名 ， 因 此 无 法 在 浏览 器 中 查看 。 如 果 读 者 是 通过 右键 快捷 菜单 创建 记 
事 本 文件 的 ， 在 给 文件 重 命名 时 ， 一 定 要 以 .html 或 .htm 作为 文件 的 后 级 。 特 别 要 注意 的 是 ， 
当 Windows 系统 被 设置 为 隐藏 文件 的 扩展 名 时 ， 更 容易 出 现 这 样 的 错误 。 读 者 可 以 在 【文件 
夹 选项 】 对 话 框 中 查看 是 否 允许 显示 扩展 名 。 


色彩 在 网 站 设计 中 占据 着 相当 重要 的 地 位 ， 无 论 是 平面 设计 还 是 网 页 设计 ， 色 
彩 永 远 是 最 重要 的 一 环 。 当 我 们 距离 显示 屏 较 远 的 时 候 ， 我 们 看 到 的 不 是 优美 的 版 


式 或 者 美丽 的 图 片 ， 而 是 网 页 的 色彩 。 
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3.1 色彩 基础 知识 


在 任何 一 个 设计 中 ， 色 彩 对 视觉 的 刺激 都 起 到 传达 第 一 信息 的 作用 。 网 页 中 的 色彩 设计 
会 带 来 最 直接 的 视觉 效果 ， 不 同 的 颜色 会 给 人 以 不 同 的 感受 ， 高 明 的 设计 师 能 运用 颜色 来 表 
现 网 站 的 理念 和 内 在 品质 。 为 了 能 更 好 地 应 用 色彩 来 设计 网 页 ， 下 面 先 来 了 解 一 下 色彩 的 基 
础 知识 。 


3.1.1 认识 色彩 


自然 界 中 的 色彩 五 颜 六 色 、 千 变 万 化 ， 比 如 玫瑰 是 红色 的 ， 大 海 是 蓝 色 的 ， 橘 子 是 橙色 
的 等 ， 但 是 最 基本 的 色彩 只 有 三 种 ( 红 、 黄 、 蓝 )， 其 他 色彩 都 可 以 由 这 三 种 色彩 调和 而 成 ， 我 
们 称 这 三 种 色彩 为 “三 原色 ”， 如 图 3-1 所 示 。 

人 们 平时 所 看 到 的 白色 光 中 包括 红 、 橙 、 黄 、 绿 、 青 、 蓝 、 紫 7 种 颜色 ， 各 颜色 间 自 然 
过 渡 ， 其 中 红 、 绿 、 蓝 是 三 原色 ， 对 三 原色 进行 不 同比 例 的 混合 可 以 得 到 各 种 颜色 ， 如 图 3-2 
所 示 。 


图 3-1 三 原色 图 3-2 色彩 色 块 
3.1.2 色彩 的 三 属性 


色彩 的 三 属性 是 色彩 的 基本 特征 ， 了 解 色彩 的 三 属性 是 学 习 配 色 的 基础 。 但 在 了 解 色彩 
的 三 属性 之 前 ， 有 必要 先 了 解 一 下 色彩 的 分 类 。 一 般 情况 下 ， 色 彩 可 以 分 为 无 彩色 、 有 彩色 
和 独立 色 三 大 类 。 

无 彩色 是 指 黑 、 白 和 灰 三 种 颜色 ; 有 彩色 是 指 除了 黑 、 白 、 灰 以 外 的 纯色 、 暗 色 、 清 色 
或 浊 色 ， 如 粉红 、 瞳 红 等 ;独立 色 则 包括 金色 与 银色 两 种 。 色 彩 的 具体 分 类 如 图 3-3 所 示 。 

只 有 对 色彩 进行 分 类 ， 才 能 对 色彩 的 构成 元 素 进行 抽象 的 了 解 。 构 成 色彩 的 元 素 有 三 
个 ， 即 色相 、 明 度 和 饱和 度 ， 这 三 个 元 素 并 称 为 色彩 的 三 属性 。 

1. 色相 

色相 是 指 色 彩 的 相貌 ， 每 一 种 色彩 都 有 不 同 的 相貌 ， 所 以 需要 对 这 些 色 彩 的 相貌 进行 命 
名 ， 以 区 别 其 中 的 差异 。 色 彩 以 红 、 橙 、 黄 、 绿 、 青 、 蓝 、 紫 的 光谱 色 为 基本 色相 。 不 同色 
相 是 不 同 波长 给 人 的 一 种 感觉 。 基 本 色相 的 秩序 以 色相 环 的 形式 体现 ， 包 括 六 色相 环 、 九 色 
相 环 、 十 二 色相 环 、 二 十 色相 环 等 。 


第 

黑色 区 

天 彩色 白色 

灰色 洁 

原色 视 

E S 营 
色彩 有 彩色 纯色 清 色 纯色 加 白色 ) 复 
其 他 色彩 EE 四 

二 暗色 (纯色 加 黑色 ) | 

独立 色 要 

银色 

如 

图 3-3 色彩 的 分 类 详 

色相 是 纯色 ， 即 组 成 可 见 光谱 的 单 色 ， 具 体 体现 如 表 3-1 所 示 。 所 
配 


表 3-1 色彩 表 


2， 明 度 


所 谓 明 度 ， 是 指 色 彩 的 明暗 程度 ， 是 颜色 明暗 深浅 的 一 种 表现 。 对 光源 色 来 说 ， 可 以 称 
为 光度 ， 对 物体 色 来 说 ， 可 以 称 为 亮度 、 深 浅 度 等 。 在 无 彩色 类 中 ， 明 度 最 高 的 是 白色 ， 明 
度 最 低 的 是 黑色 。 在 白 、 黑 色 之 间 存 在 一 个 系列 的 灰色 ， 一 般 可 分 为 九 级 。 靠 近 白色 的 部 分 
称 为 浅 灰 色 ， 靠 近 黑 色 的 部 分 称 为 暗 灰 色 ， 如 表 3-2 所 示 。 


表 3-2 明度 表 
明 度 色 彩 色 相 
最 高 明度 | | 白色 
浅 灰色 
高 明度 
浅 灰 色 
稍 亮 中 灰色 
中 明度 中 灰色 
稍 暗 中 灰色 
量 灰色 
日 
低 明度 S 
最 低 明 度 黑色 


网 页 设计 与 网 站 建设 
案例 课堂 四 一 


在 有 彩色 类 中 ， 最 明亮 的 是 黄色 ,最 暗 的 是 紫色 ,这 是 由 各 个 色相 在 可 见 光 谱 上 的 振幅 
不 同 而 造成 眼睛 的 知觉 程度 不 同 而 形成 的 。 黄 色 、 紫 色 在 有 彩色 的 色 环 中 ， 成 为 划分 明暗 的 
分 界线 。 任 何 一 个 有 彩色 挫 入 白色 ， 明 度 会 提高 ， 挫 入 黑色 ， 明 度 则 会 降低 ， 挫 入 灰色 时 ， 
依 灰 色 的 明暗 程度 而 得 出 相应 的 明度 色 。 


3， 饱 和 度 


色彩 的 饱和 度 是 指 色彩 纯洁 、 鲜 艳 的 程度 ( 见 表 3-3)。 一 般 情 况 下 ， 纯 色 的 饱和 度 最 高 。 将 
一 个 纯色 加 入 白色 时 ， 则 纯色 的 明度 会 变 高 ， 但 饱和 度 会 因此 降低 ;如果 加 入 黑色 ， 则 其 明 
度 和 饱和 度 都 随 之 降低 ;如果 加 入 灰色 ， 则 明度 不 变 ， 但 饱和 度 降低 。 


表 3-3 ”饱和 度 信息 表 


3.1.3 216 网 页 安全 色 


在 网 络 上 ， 即 使 是 一 模 一 样 的 色彩 ， 也 会 由 于 显示 设备 、 操 作 系统 、 显 卡 以 及 浏览 器 的 
不 同 而 有 不 尽 相 同 的 显示 效果 。 即 使 网 页 使 用 了 非常 合理 、 非 常 漂亮 的 配色 方案 ， 网 页 中 的 
色彩 也 会 受到 外 界 因 素 的 影响 ， 使 得 每 个 人 看 到 的 效果 都 不 相同 ， 如 
此 一 来 ， 配 色 方案 想 要 烘托 的 网 站 主题 就 无 法 很 好 地 传达 给 浏览 者 。 
那么 ， 怎 样 才能 解决 这 个 问题 呢 ? 

最 早 使 用 互联 网 的 一 些 发 达 国 家 花费 了 很 长 时 间 探 索 这 一 问题 的 
解决 方案 ， 终 于 发 现 了 216 种 网 页 安全 色 (216 Web Safety Color)， 如 
3-4 所 示 。216 网 页 安全 色 是 在 不 同 硬件 环境 、 不 同 操作 系统 、 不 
同 浏览 器 中 都 能 够 正常 显示 的 色彩 集合 ， 也 就 是 说 这 些 色彩 在 任何 设 
备 中 都 能 显示 出 相同 的 效果 。 使 用 216 网 页 安全 色 进 行 网 页 配色 可 以 
避免 失真 问题 。 图 3-4 216 网 页 安全 色 

我 们 无 须 特 别 地 记忆 216 网 页 安全 色 ， 很 多 常用 网 页 制作 软件 中 
已 携带 216 网 页 安全 色调 色 板 ， 非 常 方 便 。 例 如 ， 在 Photoshop 的 【 色 板 】 面 板 菜单 中 选择 
【Web 安全 颜色 】、【Web 色相 】 和 【Web 色谱 】 等 命令 ， 载 入 色 板 中 的 任何 色彩 在 任何 计 
算 机 中 都 会 有 同样 的 显示 效果 。 而 在 Dreamweaver 中 ， 所 有 提供 的 色彩 调 色 板 也 都 是 216 网 
页 安全 色 。 其 他 软件 就 不 一 一 列举 了 。 

虽然 只 有 216 种 色彩 可 以 确保 在 任何 计算 机 上 都 具有 相同 的 显示 效果 ， 但 这 并 不 代表 不 
能 使 用 这 216 种 色彩 之 外 的 颜色 。216 网 页 安全 色 在 需要 实现 高 精度 的 渐变 效果 或 显示 真 彩 图 


像 或 照片 时 会 有 一 定 的 欠缺 ， 但 用 于 显示 标志 或 二 维 平 面 效果 时 却 绰绰有余 。 在 合理 使 用 网 
页 安全 色 的 同时 ， 还 应 注意 搭配 使 用 非 网 页 安全 色 ， 以 创造 独特 的 风格 。 


3.2 ”网 页 色彩 的 搭配 


打开 一 个 网 站 ， 给 用 户 留 下 第 一 印象 的 既 不 是 网 站 的 内 容 ， 也 不 是 网 站 的 版 面 布局 ， 而 
是 网 站 的 色彩 。 色 彩 给 人 带 来 的 视觉 效果 非常 明显 ， 一 个 网 站 设计 得 成 功 与 否 ， 在 某 种 程度 
上 取决 于 设计 者 对 色彩 的 运用 和 搭配 。 


3.2.1 网 页 色彩 的 感觉 


有 了 好 的 框架 和 页 面 设计 ， 而 色彩 把 握 不 准 ， 则 可 能 会 导致 整个 设计 失败 。 色 彩 会 最 先 
也 最 持久 地 将 网 站 的 形象 展示 在 浏览 者 眼前 。 单 一 色彩 很 容易 给 人 们 具体 和 抽象 的 联想 ， 不 
同 的 色彩 组 合 在 一 起 ， 就 会 形成 另 一 种 风格 ， 给 人 以 不 同 的 感觉 。 

1. 色彩 的 冷暖 感觉 


色彩 在 色相 环 中 可 以 分 为 冷暖 色调 ， 当 色彩 的 明度 高 低 不 同时 ， 也 会 产生 色彩 的 冷暖 感 
觉 。 同 一 种 色彩 ， 其 明度 越 高 ， 给 人 的 感觉 就 越 冷 ; 其 明度 越 低 ， 给 人 的 感觉 就 越 暖 ， 如 线 
蓝 色 就 比 深蓝 色 要 冷 。 

如 图 3-5 所 示 为 色彩 冷 感觉 的 页 面 。 如 图 3-6 所 示 为 色彩 暖 感觉 的 页 面 。 
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2. 色彩 的 轻重 感觉 


色彩 既然 有 冷暖 的 感觉 ， 当 然 也 就 存在 着 轻重 的 感觉 ， 色 彩 的 轻重 感觉 也 是 以 明度 的 高 
低 来 评定 的 。 一 般 情况 下 ， 明 度 越 高 的 色彩 ， 感 觉 就 越 轻 ， 相 反 地 ， 明 度 越 低 的 色彩 ， 感 觉 
就 越 重 。 冷 色调 的 颜色 给 人 的 感觉 比较 轻 ， 而 暖色 调 的 颜色 给 人 的 感觉 比较 重 。 

判断 色彩 的 轻重 除了 以 明度 为 评定 标准 之 外 ， 还 可 以 以 饱和 度 的 变化 来 评定 。 明 度 高 、 
饱和 度 低 的 颜色 给 人 的 感觉 比较 轻 ， 而 明度 低 、 饱 和 度 高 的 颜色 给 人 的 感觉 就 比较 重 。 

如 图 3-7 所 示 为 色彩 轻 感 觉 的 页 面 觉 的 页 面 。 
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3-8 色彩 重 感觉 页 面 


3. 色彩 的 克朗 郁闷 感 


人 的 心情 有 快乐 和 郁闷 之 分 ， 色 彩 也 有 好 坏 心 情 之 分 。 那 些 暖色 调 的 色彩 和 那些 明度 比 
较 高 的 色彩 ， 让 人 看 起 来 就 比较 和 舒服、 爽快 ， 这 样 的 色彩 通常 被 称 为 爽朗 感 色彩 ， 如 图 3-9 
所 示 。 

而 那些 冷色 调 的 色彩 和 那些 明度 比较 暗 的 色彩 ， 让 人 看 起 来 就 比较 忧郁 ， 打 不 起 精神 ， 
这 样 的 色彩 通常 被 称 为 郁闷 感 色彩 ， 如 图 3-10 所 示 。 


4. 色彩 的 兴奋 沉稳 感 


众所周知 ， 人 们 在 平时 生活 中 购物 时 ， 购 买 的 商品 的 颜色 与 当时 的 心情 好 坏 有 直接 的 联 
系 。 当 人 们 心情 好 、 情 绪 比 较 激 动 兴奋 时 ， 选 择 的 往往 是 一 些 颜 色 比较 明朗 上 且 具 有 亲切 感 的 
商品 ， 因 为 这 些 颜 色 给 人 一 种 兴奋 的 感觉 。 这 种 具有 兴奋 感觉 的 颜色 一 般 是 一 些 暖 色调 的 颜 


色 ， 并 且 是 明度 和 饱和 度 都 较 高 的 颜色 ， 如 图 3-11 所 示 。 
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图 3-10 色彩 郁闷 感觉 页 面 
与 之 相反 ， 当 人 们 情绪 低落 、 心 情 不 平 静 时 ， 往 往 喜 欢 购买 一 些 颜 色 比 较 暗 的 商品 ， 因 
Re 
稳 ， 虽 然 有 点 儿 冷 冷 的 感觉 ， 但 能 让 头脑 清醒 一 些 。 
此 外 ， 还 有 那些 明度 和 饱和 度 都 比较 低 的 颜色 也 给 人 一 种 沉稳 感 ， 让 人 心里 踏实 ， 有 安 
全 感 ， 如 图 3-12 所 示 。 
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5. 色彩 的 华丽 与 朴实 


不 同 的 色调 还 会 带 来 气质 上 的 不 同感 觉 。 那 些 饱 和 度 高 、 明 度 高 的 纯色 调 ， 会 给 人 一 种 
高 贵 华丽 的 感觉 ， 如 图 3-13 所 示 。 而 那些 饱和 度 低 、 明 度 低 的 暗色 调 与 深 色调 ， 则 会 给 人 一 
种 朴实 无 华 的 感觉 ， 如 图 3-14 所 示 。 
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6. 色彩 的 酸甜苦辣 感 


酸甜苦辣 是 指 人 的 味觉 ， 但 在 色彩 中 也 同样 存在 这 样 的 感觉 ， 不 同 的 色 块 组 合 在 一 起 ， 
就 能 给 人 以 不 同 的 酸甜苦辣 感 。 

1) 酸 

提起 酸 ， 人 们 不 免 就 联想 到 未 成 熟 的 和 葡萄、 橘子 等 物体 。 有 时 ， 当 人 们 看 到 与 这 些 果 实 
相同 的 颜色 时 ， 就 会 感觉 口 里 酸 酸 的 ， 这 就 是 具有 酸 感觉 的 颜色 。 生 葡萄 的 颜色 是 绿色 ， 桶 
子 的 颜色 是 橙色 ， 这 两 种 颜色 的 搭配 会 给 人 一 种 酸 酸 的 感觉 ， 如 图 3-15 所 示 。 

2) 甜 

提起 甜 ， 就 会 联想 到 亮晶晶 的 白糖 、 红 彤 彤 的 苹果 以 及 成 熟 了 的 橘子 ， 所 以 人 们 一 看 到 
乳白 色 、 黄 色 就 会 感觉 出 甜 味 ， 这 就 是 具有 甜 感觉 的 颜色 ， 并 且 这 些 颜 色 都 是 明度 高 且 暖 色 
调 的 颜色 ， 如 图 3-16 所 示 。 
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3) 苦 
提起 苦 ， 就 会 想到 那些 苦 药丸 子 ， 不 用 闻 ， 只 是 光 看 就 感觉 苦 苦 的 。 这 些 药丸 一 般 都 为 
黑色 或 黑 神色， 特别 是 名 为 “甘草 片 ” 的 棕色 药丸 已 经 达到 想 想 就 很 苦 的 地 步 。 于 是 ， 人 们 
只 要 看 到 这 些 近似 药丸 的 、 明 度 比 较 低 ， 并 且 饱和 度 比较 低 的 浊 色 色彩 ， 就 会 有 一 种 苦 苦 的 
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感觉 ， 如 图 3-17 所 示 。 

新 

提起 辣 ， 就 会 想到 那 火红 的 辣椒 、 黄 黄 的 生姜 ， 看 见 这 些 不 免 感觉 嘴 中 麻 麻 的 ， 所 以 在 
色相 环 中 由 红色 、 黄 色 等 搭配 起 来 的 色 块 ， 就 有 一 种 辣 辣 的 感觉 ， 如 图 3-18 所 示 。 
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3.2.2 ”网 页 色彩 搭配 原理 


色彩 搭配 既是 一 项 技术 性 很 强 的 工作 ， 也 是 一 项 艺术 性 很 强 的 工作 ， 因 此 在 设计 网 页 
时 ， 除 了 要 考虑 网 站 本 身 的 特点 外 ， 还 要 遵循 一 定 的 艺术 规律 ， 从 而 设计 出 色彩 鲜明 、 性 
格 独特 的 网 站 。 

网 页 的 色彩 是 树立 网 站 形象 的 关键 要 素 之 一 ， 色 彩 搭配 却 是 令 网 页 设计 初学 者 感到 头疼 
的 问题 。 网 页 的 背景 、 文 字 、 图 标 、 边 框 、 链 接 等 应 该 采用 什么 样 的 色彩 ， 应 该 搭配 什么 样 
的 色彩 ， 才 能 最 好 地 表达 出 网 站 的 内 涵 和 主题 呢 ? 下 面 介绍 网 页 色彩 搭配 的 一 些 原理 。 

1. 色彩 的 鲜明 性 


网 页 的 色彩 要 鲜明 ， 这 样 容易 引 人 注 目 。 一 个 网 站 的 用 色 必 须要 有 自己 独特 的 风格 ， 这 
样 才能 显得 个 性 鲜明 ， 给 浏览 者 留 下 深刻 的 印象 。 


2. 色彩 的 独特 性 

网 页 要 有 与 众 不 同 的 色彩 ， 使 得 浏览 者 对 网 站 有 强烈 的 印象 。 

3. 色彩 的 艺术 性 

网 站 设计 也 是 一 种 艺术 活动 ， 因 此 必须 遵循 艺术 规律 。 在 考虑 到 网 站 本 身 特 点 的 同时 ， 
应 当 按照 内 容 决定 形式 的 原则 ， 大 胆 地 进行 艺术 创新 ， 设 计 出 既 符 合 网 站 要 求 ， 又 有 一 定 艺 


术 特 色 的 网 站 。 不 同 的 色彩 会 让 人 产生 不 同 的 联想 ， 如 蓝 色 想到 天 空 、 黑 色 想 到 黑夜 、 红 色 
想到 喜事 等 ， 选 择 色彩 要 和 网 页 的 内 涵 相 关联 ， 如 图 3-19 所 示 。 
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图 3-19 色彩 的 艺术 性 
4. 色彩 搭配 的 合理 性 
网 页 设计 虽然 属于 平面 设计 的 范畴 ， 但 又 与 其 他 平面 设计 不 同 ， 它 在 遵循 艺术 规律 的 同 


时 ， 还 应 当 考虑 人 的 生理 特点 。 色 彩 措 配 一 定 要 合理 ， 色 彩 和 表达 的 内 容 气 氛 要 相 适合 ， 应 
给 人 一 种 和 谐 、 愉 快 的 感觉 ， 要 避免 采用 纯度 很 高 的 单一 色彩 ， 这 样 容 易 造 成 视觉 疲劳 。 


3.2.3 网 页 色彩 搭配 技巧 


色彩 的 搭配 是 一 门 艺术 ， 灵 活 运 用 它 能 让 网 页 更 具 亲和力 。 要 想 制作 出 漂亮 的 网 页 ， 需 
要 灵活 地 运用 色彩 再 加 上 自己 的 创意 和 技巧 。 下 面 是 网 页 色彩 搭配 的 一 些 常用 技巧 。 

1. 使 用 单 色 

尽管 网 站 设计 要 避免 采用 单一 色彩 ， 以 免 产 生 单调 的 感觉 ， 但 通过 调整 色彩 的 饱和 度 和 
透明 度 ， 也 可 以 产生 变化 ， 使 网 站 避免 单调 ， 做 到 色彩 统一 ， 有 层次 感 。 

2. 使 用 邻近 色 


所 谓 邻 近 色 ， 就 是 在 色 带 上 相 邻 近 的 颜色 ， 如 绿色 和 蓝 色 、 红 色 和 黄色 就 互 为 邻近 色 。 
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采用 邻近 色 搭 配 网 页 色彩 可 以 避免 色彩 杂乱 ， 易 于 实现 页 面 的 色彩 丰富 、 和 谐 统 一 。 
3. 使 用 对 比 色 


对 比 色 可 以 突出 重点 ， 产 生 强 烈 的 视觉 效果 ， 通 过 合理 使 用 对 比 色 ， 能 够 使 网 站 特色 鲜 
明 、 重 点 突出 。 在 设计 时 ， 一 般 以 一 种 颜色 为 主 色 调 ， 将 对 比 色 作为 点 级 ， 这 样 可 以 起 到 画 
龙 点 睛 的 作用 。 


4. 背景 色 的 使 用 


背景 的 颜色 不 要 太 深 ， 和 否则 会 显得 过 于 厚重 ， 这 样 会 影响 整个 页 面 的 显示 效果 。 一 般 可 
采用 素 淡 清 雅 的 色彩 ， 要 避免 采用 花纹 复杂 的 图 片 和 纯度 很 高 的 色彩 作为 背景 色 。 同 时 ， 背 
景色 要 与 文字 的 色彩 对 比 强烈 一 些 。 


5. 色彩 的 数量 


一 般 初 学 者 在 设计 网 页 时 往往 会 使 用 多 种 颜色 ， 使 网 页 变 得 很 “ 花 ”， 缺 乏 统一 和 协 
调 ， 缺 乏 内 在 的 美感 ， 给 人 一 种 繁杂 的 感觉 。 事 实 上 ， 网 站 用 色 并 不 是 越 多 越 好 ， 一 般 应 控 
制 在 4 种 色彩 以 内 ， 然 后 可 以 通过 调整 色彩 的 各 种 属性 来 产生 颜色 的 变化 ， 并 保持 整个 网 页 
的 色调 统一 。 


6. 要 和 网 站 内 容 匹 配 


应 当 了 解 网 站 所 要 传达 的 信息 和 品牌 ， 进 而 选择 可 以 加 强 这 些 信 息 的 颜色 。 例 如 ， 在 设 
计 一 个 强调 稳健 的 金融 机 构 的 网 站 页 面 时 ， 就 要 选择 冷色 系 、 和 柔和 的 颜色 ， 如 蓝 色 、 灰 色 或 
绿色 。 在 这 样 的 状况 下 ， 如 果 使 用 暖色 系 或 活泼 的 颜色 ， 就 可 能 会 破坏 该 网 站 的 品牌 。 


7. 围绕 网 页 主题 


色彩 要 能 够 烘托 出 主题 。 同 时 还 要 考虑 网 站 的 访问 对 象 ， 文 化 差异 会 使 色彩 产生 非 预 期 
的 反应 ， 不 同 地 区 与 不 同年 龄 层 对 颜色 的 反应 也 会 有 所 不 同 。 年 轻 人 一 般 比 较 喜 欢 饱和 色 ， 
但 这 样 的 颜色 却 引 不 起 高 年 龄 层 人 群 的 兴趣 。 

总 之 ， 色 彩 的 使 用 并 没有 一 定 的 法 则 ， 如 果 一 定 要 套用 某 个 法 则 ， 结 果 只 会 适得其反 。 
色彩 的 运用 还 与 每 个 人 的 审美 观 、 喜 好 、 知 识 层次 等 密切 相关 。 一 般 应 先 确定 一 种 能 体现 主 
题 的 主体 色 ， 然 后 根据 具体 的 需要 应 用 颜色 的 近似 和 对 比 来 完成 整个 页 面 的 配色 方案 。 整 个 
页 面 在 视觉 上 应 该 是 一 个 整体 ， 以 获得 和 谐 、 悦 目的 视觉 效果 。 


3.3 网 站 的 色彩 应 用 案例 
在 了 解 了 网 页 色彩 的 搭配 原理 与 技巧 后 ， 下 面 介绍 一 些 网 站 的 色彩 搭配 应 用 案例 。 
3.3.1 案例 1 一 一 网 络 购物 类 网 站 色彩 应 用 


网 络 购物 类 网 站 一 般 不 仅 要 体现 出 文化 的 时 尚 ， 而 且 还 要 体现 出 品牌 的 时 尚 。 通 常情 况 
下 ， 说 起 具有 品牌 时 尚 的 女性 服装 和 鞋子 ， 人 们 脑海 中 不 自觉 地 就 会 涌现 出 红色 、 紫 色 及 粉 


a 


红色 ， 因 为 这 些 颜 色 已 经 成 为 女性 的 专用 色彩 ， 所 以 典型 的 女性 服饰 都 常 以 这 些 色彩 作为 修 
饰 色 。 

如 图 3-20 所 示 即 为 一 个 主 色调 为 红色 (中 明度 、 中 纯度 )， 辅 助 色 为 灰色 ( 低 明度 、 低 纯 
度 )、 蓝 色 (中 明度 、 中 纯度 ) 和 白色 (高 明度 、 高 纯度 ) 的 网 络 购物 类 网 站 。 该 网 站 的 红色 给 人 以 
醒目 温暖 的 感觉 ， 白 色 则 给 人 以 干净 明亮 的 感觉 。 
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3-20 网络 购物 类 网 站 
3.3.2 ”案例 2 一 一 游戏 类 网 站 色彩 应 用 


随 着 互联 网 技术 的 不 断 进步 ， 各 种 类 型 的 游戏 类 网 站 如 雨后春笋 般 出 现 ， 并 逐渐 成 为 娱 
乐 类 网 站 中 一 种 不 可 缺少 的 类 型 。 这 类 网 站 的 风格 和 颜色 也 是 千变万化 ， 随 着 游戏 性 质 的 不 
同 而 呈现 出 不 同 的 样 貌 。 
如 图 3-21 所 示 即 为 一 个 战斗 性 游戏 类 网 站 。 该 网 站 的 主 色调 为 灰色 (中 明度 、 中 纯度 )， 
辅助 色 为 黑色 ( 低 明度 、 低 纯度 )、 黄 色 ( 中 明度 、 中 纯度 )。 网 站 大 面积 使 用 灰色 修饰 网 页 ， 给 
人 一 种 深 幽 、 复 古 的 感觉 ， 仿 佛 回 到 了 那 悠远 的 远古 时 代 。 使 用 黑色 和 黄色 做 点 级 ， 更 加 突 
出 了 远古 人 们 决斗 的 场景 ， 从 而 吸引 更 多 浏览 者 进入 虚幻 的 战斗 中 去 。 
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图 3-21 游戏 类 网 站 


网 页 设计 与 网 站 建设 
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3.3.3 ”案例 3 一 一 企业 门户 网 站 色彩 应 用 


企业 门户 网 站 在 整个 网 站 界 占据 着 重要 地 位 ， 其 网 站 配色 十 分 重要 ， 是 作为 初学 者 必须 
学 习 的 。 


1. 以 形象 为 主 的 企业 门户 网 站 


以 形象 为 主 的 企业 门户 网 站 就 是 以 企业 形象 为 主体 宣传 的 网 站 ， 这 类 网 站 的 表现 形式 与 
众 不 同 ， 经 常 是 以 宽广 的 视野 、 雄 厚 的 实力 、 强 大 的 视觉 冲击 力 ， 并 配 以 震撼 的 音乐 以 及 气 
宇 轩 昂 的 色彩 ， 将 企业 形象 不 折 不 扣 地 展现 在 世人 面前 ， 给 人 以 信任 和 安全 的 感觉 。 

如 图 3-22 所 示 是 一 个 标准 以 企业 形象 为 主 的 地 产 公司 网 站 首页 。 该 网 站 的 主 色调 为 暗 红 
色 ( 中 明度 、 中 纯度 )， 辅 助 色 为 灰色 (中 明度 、 低 纯度 )。 页 面 采用 暗 红 色 来 勾勒 修饰 ， 运 用 战 
争 年 代 战 士 们 冲锋 陷 阵 的 图 片 作 为 网 站 的 主 背 景 ， 意 在 向 人 们 展现 此 企业 犹如 抗战 时 期 的 中 
国 一 样 ， 有 妆 力 ， 有 动力 ， 有 活力 ， 并 且 有 足够 的 信心 将 自己 的 企业 做 大 做 强 。 另外 ， 用 灰 
色 作 为 修饰 色 ， 更 突出 表现 出 坚定 的 决心 和 充足 的 信心 。 


2. 以 产品 为 主 的 企业 门户 网 站 


以 产品 为 主 的 企业 门 广 :网 站 大 各 以 推 全 并 产品 为 主 ， 整 个 网 页 贯穿 产品 的 各 种 介绍 ， 并 
人 和 且 地 品 的 性 能 和 质量 ， 从 而 突出 产品 的 特点 和 优越 性 。 此 类 网 站 的 表 
现 和 总 是 在 网 站 首 页 或 欢迎 页 面 b 产品 形象 作为 展示 的 核心 ， 同 时 配 以 动画 
或 音效 等 ， 吸引 浏览 者 的 注 : 意 ， 从 而 达到 宣传 自己 产品 的 目的 。 

3-23 所 示 的 某 品 牌 汽车 厂商 网 站 就 是 一 个 很 好 的 例子 。 该 网 站 是 以 汽车 销售 为 主 的 
企业 门户 网 站 ， 用 黑色 ( 低 明 度 、 低 纯度 ) 作 为 主 色调 ， 用 以 展现 其 汽车 产品 的 强悍 与 优雅 ， 用 
灰色 (中 明度 、 低 纯度 ) 作 为 辅助 色 ， 使 页 面 在 稳重 中 增添 了 明亮 的 色彩 ， 增 加 了 汽车 的 力量 
感 ， 从 而 将 企业 产品 醒目 地 展现 给 浏览 者 。 
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图 3-22 “以 形象 为 主 的 企业 门户 网 站 图 3-23 ”以 产品 为 主 的 企业 门户 网 站 
时 政 新 闻 类 网 站 色彩 应 用 


时 政 新 闻 类 网 站 是 指 那些 以 提供 专业 动态 信息 为 主 ， 面 向 获取 信息 的 专业 用 户 的 网 站 ， 
此 类 网 站 比 门户 类 网 站 更 具 特 色 。 


如 图 3-24 所 示 即 为 一 个 标准 的 时 政 新 闻 类 网 站 。 该 网 站 的 主 色调 为 蓝 色 ( 高 明度 、 高 纯度 )， 
辅助 色 为 白色 (高 明度 、 高 纯度 )。 该 网 站 结构 清晰 明了 ， 各 个 板块 分 配 明朗 ， 色 彩 调和 也 非 
常 到 位 ， 用 白色 作为 背景 色 ， 更 显示 出 蓝 色 的 纯净 与 舒适 ， 使 整个 页 面 显得 简单 而 又 整 


齐 ， 给 人 一 种 赏心悦目 的 感觉 。 
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图 3-24 ”时 政 新 闻 类 网 站 
影音 类 网 站 色彩 应 用 


3.3.5 案例 5 


在 众多 网 站 中 ， 影 音 类 网 站 是 受 欢 迎 程度 相当 高 的 网 站 类 型 之 一 ， 特 别 
疑 是 影音 类 网 站 浏览 者 的 主力 。 由 于 影音 类 网 站 以 突出 影像 和 声音 为 其 特点 ， 所 以 此 类 网 站 


在 影像 和 声音 方面 的 表现 尤为 突出 。 


如 图 3-25 所 示 的 影音 类 网 站 运用 具有 空旷 气息 的 蓝 色 作为 整个 网 页 的 修饰 色 ， 意 在 突出 
此 网 站 的 自然 气息 。 该 网 站 的 主 色 调 为 蓝 色 (中 明度 、 中 纯度 )， 辅 助 色 为 橘 黄 色 ( 中 明度 、 中 
纯度 ) 和 白色 (高 明度 、 高 纯度 )， 使 用 自然 的 白色 更 加 衬托 出 蓝 色 的 洁净 和 优雅 ， 又 运用 橘 黄 
色 作 为 整个 网 站 的 点 级 色彩 ， 起 到 烘托 修饰 的 作用 ， 从 而 更 加 鲜明 地 突出 了 网 站 内 容 的 主题 。 


图 3-25 影音 类 网 站 
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网 页 设计 与 网 站 建设 
案例 课堂 由 一 


3.3.6 ”案例 6 一 一 娱乐 类 网 站 色彩 应 用 


在 众多 类 别 的 网 站 中 ， 思 想 最 活跃 、 格 调 最 休闲 、 色 彩 最 缤纷 的 网 站 非 娱 乐 类 网 站 莫 
属 ， 格 式 多 样 化 的 娱乐 类 网 站 ， 总 是 通过 独特 的 设计 思路 来 吸引 浏览 者 注意 ， 表 现 其 个 性 的 


网 站 空间 。 
如 图 3-26 所 示 是 一 个 音乐 类 网 站 。 该 网 站 的 主 色调 为 白色 (高 明度 、 高 纯度 )， 使 用 具有 


神秘 色彩 的 黑色 作为 点 级 ， 给 人 一 种 新 鲜 感 。 
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图 3-26 音乐 类 网 站 


3.4” 跟 我 练 练 手 
3.4.1 练习 目标 
能 够 熟练 掌握 网 页 色彩 设计 与 搭配 的 方法 。 


3.4.2 上 机 练习 


练习 1: 了 解 色彩 的 三 属性 。 
练习 2: 搭配 不 同类 型 的 网 页 色彩 。 


3.5 高 手 甜点 
甜点 1: 如 何 使 自己 的 网 站 搭配 颜色 后 更 具 亲 和 力 


在 对 网 页 进行 配色 时 ， 必 须 考虑 网 站 本 身 的 性 质 。 如 果 网 站 的 产品 是 以 化 妆 品 为 主 ， 那 
么 网 站 的 色彩 应 多 采用 和 柔和、 柔美、 明亮 的 色彩 ， 这 样 能 给 浏览 者 一 种 温柔 的 感觉 ， 让 其 感 


全‘ 


受到 很 强 的 亲和力 。 
甜点 2: 如 何在 网 页 中 营造 出 地 中 海 式 的 风情 配色 


可 使 用 “ 白 + 蓝 ” 的 配色 ， 由 于 天 空 是 淡 蓝 的， 海水 是 深蓝 的 ， 可 以 把 白色 的 清凉 与 无 瑕 
表现 出 来 。 白 色 很 容易 令 人 感到 十 分 自由 ， 令 人 心胸 开阔 ， 似 乎 像 海 天 一 色 的 大 自然 一 样 开 
阔 自 在 。 
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开启 网 页 制作 之 路 
网 站 建设 基本 
流程 与 制作 


申请 一 个 网 站 空间 ， 以 便 存 放 网 站 。 网 久 过 程 中 ， 
具 ， 主 要 包括 用 于 制作 网 页 文字 与 图 像 特效 的 Photoshop、 用 于 制作 网 页 动画 效果 
reamWweaver, 
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网 页 设计 与 网 站 建设 
案例 课堂 四 一 


4.1 建站 方式 


目前 ， 建 设 一 个 网 站 已 经 不 是 什么 神秘 的 事情 了 ， 用 户 可 以 选择 多 种 建站 方式 ， 比 较 常 
见 的 建站 方式 主要 有 三 种 ， 分 别 是 自助 建站 、 智 能 建站 和 专业 设计 。 


4.1.1 自助 建站 


自助 建站 就 是 通过 一 套 完善 、 智 能 的 系统 ， 让 不 会 建设 网 站 的 人 通过 一 些 非常 简单 的 操 
作 就 能 轻松 建立 自己 的 网 站 。 自 助 建站 一 般 是 将 已 经 做 好 的 网 站 (包含 非常 多 的 模板 及 非常 智 
能 化 的 控制 系统 ) 传 到 网 络 空间 上 ， 购 买 了 自助 建站 服务 的 人 只 需要 登录 后 台 进 行 一 些 非常 简 
单 的 设置 ， 就 能 建立 其 个 性 化 的 网 站 。 

如 图 4-1 所 示 为 提供 自助 建站 服务 的 网 站 。 

“会 打字 就 能 建 网 站 ”是 自助 建站 方式 的 最 大 亮点 。 一 个 会 简单 计算 机 操作 的 人 只 要 几 
分 钟 就 能 快速 生成 一 个 企业 网 站 ， 甚 至 是 各 类 门户 网 站 ， 这 就 是 自助 建站 所 提出 的 网 站 建设 
理念 。 这 种 建站 方式 使 企 事 业 单 位 能 够 快速 而 有 效 地 以 “成 本 节约 、 简 单 易 用 、 维 护 方便 ” 
的 方式 来 建设 和 实施 其 先进 的 电子 商务 系统 ， 通 过 有 效 地 应 用 互联 网 技术 来 提高 运作 效率 、 
降低 成 本 、 拓 展业 务 ， 从 而 实现 更 大 的 利润 和 效益 。 

如 图 4-2 所 示 为 提供 自助 建站 服务 的 网 站 中 展示 的 网 页 预览 效果 。 用 户 只 需要 找到 自己 
所 需 网 站 的 类 型 ， 然 后 选择 自己 喜欢 的 网 页 就 可 以 预览 效果 了 。 
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图 4-1 提供 自助 建站 服务 的 网 站 图 4-2 网 页 预览 效果 
4.1.2 智能 建站 


智能 建站 是 自助 建站 的 “升级 版 ”， 与 自助 建站 相 比 ， 智 能 建站 继承 了 其 易 上 手 、 成 本 
低 的 优点 ， 气 弃 了 其 功能 简单 、 呆 板 的 缺点 。 智 能 建站 系统 的 功能 十 分 强大 ， 可 以 比拟 大 型 
的 CMS( 内 容 管 理 系 统 ) 程 序 ， 还 能 够 自 定义 网 站 板块 功能 ， 使 原先 在 自助 建站 程序 上 不 具备 
的 购物 系统 、 在 线 支付 系统 、 权 限 系 统 、 产 品 发 布 系统 、 新 闻 系 统 、 会 员 系 统 等 功能 成 为 
现实 。 


如 图 4-3 所 示 为 提供 智能 建站 服务 的 网 站 ， 用 户 只 需 在 网 页 左 侧 选择 自己 的 行业 分 类 ， 
就 可 以 在 右 侧 查看 该 网 站 已 经 做 好 的 网 页 模板 。 


图 4-3 提供 智能 建站 服务 的 网 站 


4.1.3 专业 设计 


专业 设计 也 被 称 为 人 工 建 站 。 人 工 建站 就 需要 网 站 建设 者 找 建站 公司 按照 自己 的 要 求 设 
计 网 站 。 市 面 上 的 人 工 建站 价格 都 不 会 太 低 ， 就 拿 搭建 一 个 最 简单 的 企业 网 站 来 说 ， 其 报价 
就 不 会 低 于 千 元 ， 这 其 中 还 不 包括 注册 域名 和 购买 主机 空间 的 费用 。 

不 过 ， 人 工 建站 固然 成 本 很 高 ， 但 其 优势 也 是 显而易见 的 ， 因 为 人 工 建站 可 以 根据 网 站 
主 的 要 求 定制 ， 网 站 模板 可 以 任意 修改 ， 直 至 用 户 满意 为 止 。 但 是 ， 这 种 服务 是 一 锤子 买 
卖 ， 网 站 交付 给 网 站 主 后 ， 如 果 出 现 漏洞 或 设计 问题 也 不 会 有 免费 售后 服务 。 相 对 智能 建站 
的 24 小 时 在 线 免费 技术 支持 ， 手 工 建站 的 安全 和 升级 问题 令 人 担忧 。 


4.2 建站 流程 


对 一 个 网 站 来 说 ， 除 了 网 页 内 容 以 外 ， 还 要 对 网 站 进行 整体 规划 设计 。 格 局 凌乱 的 网 
站 即使 内 容 再 精彩 ， 也 不 能 说 是 一 个 好 网 站 。 要 设计 出 一 个 精美 的 网 站 ， 前 期 的 规划 是 必 不 
可 少 的 。 


4.2.1 网 站 规划 


规划 站 点 就 像 设计 师 设计 大 楼 一 样 ， 图 纸 设 计 好 了 ， 才 能 建成 一 座 漂亮 的 楼 房 。 规 划 站 
点 就 是 对 站 点 中 所 使 用 的 素材 和 资料 进行 管理 和 规划 ， 对 网 站 中 栏目 的 设置 、 颜 色 的 搭配 、 
版 面 的 设计 、 文 字 图 片 的 运用 等 进行 规划 。 

一 般 情况 下 ， 将 站 点 中 所 用 的 图 片 和 按钮 等 图 形 元 素 放 在 Images 文件 夹 中 ，HTML 文件 
放 在 根 目 录 下 ， 而 动画 和 视频 等 放 在 Flash 文件 夹 中 。 还 要 对 站 点 中 的 素材 进行 详细 的 规划 ， 
便于 日 后 管理 。 


bi 
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4.2.2 搜集 资料 


确定 了 网 站 风格 和 布局 后 ， 就 要 开始 搜集 
素材 了 。 常 言 道 : “ 巧 妇 难 为 无 米 之 炊 。” 要 
让 自己 的 网 站 有 声 有 色 、 能 吸引 人 ， 就 要 尽量 
搜集 素材 ， 包 括 文字 、 图 片 、 音 频 、 动 画 及 视 
频 等 ， 搜 集 到 的 素材 越 充分 ， 制 作 网 站 就 越 容 
易 。 素 材 既 可 以 从 图 书 、 报 刊 、 光 盘 及 多 媒体 
上 得 来 ， 也 可 以 从 网 上 搜集 ， 还 可 以 自己 制 
作 ， 然 后 把 搜集 到 的 素材 去 粗 取 精 ， 选 出 制作 
网 页 所 需 的 素材 ， 如 图 4-4 所 示 。 

不 过 ， 在 搜集 图 片 素材 时 ， 一 定 要 注意 图 
片 的 大 小 ， 因 为 在 网 络 中 传输 时 ， 图 片 的 容量 
越 小 ， 传 输 的 速度 就 越 快 ， 所 以 应 尽量 搜集 容 图 4-4 搜索 网 站 素材 图 片 
量 小 、 画 面 精美 的 图 片 。 


4.2.3 制作 网 页 


制作 网 页 是 一 个 复杂 而 细致 的 过 程 ， 一 定 要 按照 先 大 后 小 、 先 简单 后 复杂 的 顺序 来 制 
作 。 所 谓 先 大 后 小 ， 是 指 在 制作 网 页 时 ， 先 把 大 的 结构 设计 好 ， 然 后 再 逐步 完善 小 的 结构 设 
计 。 所 谓 先 简单 后 复杂 ， 是 指 先 设计 出 简单 的 内 容 ， 然 后 再 设计 复杂 的 内 容 ， 以 便 出 现 问题 
时 能 及 时 修改 。 

进行 网 页 排版 时 ， 要 尽量 保持 网 页 风格 的 一 致 性 ， 不 至 于 在 网 页 跳 转 时 产生 不 协调 的 感 
觉 。 在 制作 网 页 时 灵活 地 运用 模板 ， 可 以 大 大 地 提高 制作 的 效率 。 将 相同 版 面 的 网 页 做 成 模 
板 ， 基 于 此 模板 创建 网 页 ， 以 后 想 改变 网 页 时 ， 只 需要 修改 模板 就 可 以 了 。 如 图 4-5 所 示 就 
是 一 个 主题 鲜明 的 网 页 ， 全 网 页 围绕 着 旅游 这 个 主题 来 进行 。 


图 4-5 网 站 的 首页 


4.2.4 网 站 测试 


网 页 制作 完毕 后 ， 在 上 传 网 站 之 前 ， 要 在 浏览 器 中 打开 网 站 ， 逐 一 对 站 点 中 的 网 页 进行 
测试 ， 发 现 问 题 要 及 时 修改 ， 然 后 再 上 传 。 


4.2.5 申请 域名 


网 站 建设 好 之 后 ， 就 要 在 网 上 给 网 站 注册 一 个 标识 ， 即 域名 。 申 请 域名 的 方法 很 多 ， 用 
户 可 以 登录 域名 服务 商 的 网 站 ， 根 据 提示 申请 域名 。 域 名 有 免费 域名 和 收费 域名 两 种 ， 用 户 
可 以 根据 实际 的 需要 进行 选择 。 


4.2.6 ”申请 空间 


域名 注册 成 功 之 后 ， 就 需要 申请 网 站 空间 。 应 根据 不 同 的 网 站 类 型 选择 不 同 的 空间 。 

网 站 空间 有 免费 空间 和 收费 空间 两 种 ， 对 个 人 网 站 的 用 户 来 说 ， 可 以 先 申请 免费 空间 使 
用 。 免 费 空间 只 需要 向 空间 提供 商 提出 申请 ， 得 到 答复 后 ， 按 照 说 明 上 传 主页 即 可 ， 主 页 的 
域名 和 空间 都 不 用 操心 。 使 用 免费 空间 美中不足 的 是 : 网 站 的 空间 有 限 ， 提 供 的 服务 一 般 ， 
空间 不 是 非常 稳定 ， 域 名 不 能 随心 所 欲 。 

对 商业 网 站 而 言 ， 用 户 需 要 考虑 空间 和 安全 性 等 因素 ， 为 此 可 以 选择 收费 空间 。 


4.2.7 网 站 备案 


网 站 备案 ( 见 图 4-6) 的 目的 是 防止 不 法 用 户 在 网 上 从 事 非 法 的 网 站 经 营 活动 ， 打 击 不 良 互联 
网 信息 的 传播 。 
不 管 是 经 营 性 还 是 非 经 营 性 的 网 站 均 需 要 备案 且 备案 流程 基本 一 致 。 


图 4-6 网 站 备案 


网 站 备案 的 流程 如 下 。 
EC 网 站 备案 的 途径 有 两 种 : 一 种 是 网 站 主办 者 自己 登录 到 网 站 备案 系统 进行 备 
案 ， 另 一 种 是 通过 接 入 商 代为 备案 ， 如 图 4-7 所 示 。 


pI 网 站 接 入 商 也 称 服务 器 提供 商 ， 就 是 提供 网 站 空间 的 服务 商 。 
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EECDUP9 通过 上 述 两 种 途径 ， 将 网 站 和 网 站 主办 者 的 信息 提供 给 提供 网 站 接 入 服务 的 服 
务 器 提供 商 ， 如 图 4-8 所 示 。 
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图 4-7 ”网 站 备案 的 方式 图 4-8 接 入 服务 单位 


EEJS 服务 器 提供 商 对 网 站 主办 者 提供 的 信息 的 真实 性 进行 查验 ， 如 图 4-9 所 示 。 
YY 如 果 信息 有 误 ， 会 被 退回 ， 如 果 信息 正确 、 完 整 ， 服 务 器 提供 商会 将 信息 提交 
到 省 局 的 信息 审核 系统 继续 审核 ， 如 图 4-10 所 示 。 
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4-9 ”验证 网 站 备案 资料 4-10 ”审核 网 站 的 备案 信息 


区 于 BY 信息 在 省 局 系统 中 等 待 审核 ， 如 图 4-11 所 示 。 
EGR 如 果 备 案 信 息 在 省 局 的 审核 中 通过 ， 将 发 放 网 站 备案 号 ， 如 图 4-12 所 示 
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图 4-11 等 待 审核 图 4-12 审核 通过 ， 返 回 备案 号 


ED 如 果 没有 通过 省 局 的 审核 ， 信 息 会 返回 到 企业 系统 (服务 器 提供 商 ) 并 退回 给 网 站 
主办 者 ， 需 要 重新 提交 和 审核 网 站 备案 信息 。 如 果 通 过 审核 ， 则 省 局 的 备案 系统 将 
网 站 的 备案 信息 提交 到 部 级 的 网 站 备案 系统 中 保存 ， 同 时 网 站 的 CPI 备案 过 程 完 
成 ， 如 图 4-13 所 示 。 
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4-13 ”网 站 备案 完成 


4.2.8 发 布 网 页 


在 一 切 前 期 的 准备 工作 都 做 好 后 ， 再 经 过 网 站 的 测试 ， 下 面 就 可 以 发 布 网 页 了 。 发 布 网 
页 也 被 称 为 上 传 网 站 ， 一 般 使 用 FTP 协议 来 上 传 ， 即 以 远程 文件 传输 方式 上 传 到 服务 器 中 申 
请 的 域名 之 下 。 常 用 的 FTP 上 传 工具 有 FlashFXP、CuteFTP 和 LeapFTP。 另 外 ， 还 可 以 直接 
使 用 网 页 制作 工具 Dreamweaver CS6 提供 的 上 传 和 下 载 功能 来 发 布 网 页 。 


4.2.9 网 站 推广 和 维护 


1. 网 站 推广 


网 站 制作 好 之 后 ， 还 要 不 断 地 对 其 进行 宣传 ， 这 样 才能 让 更 多 人 认识 它 ， 以 提高 网 站 的 
访问 率 和 知名 度 。 推 广 的 方法 很 多 ， 如 到 搜索 引擎 上 注册 、 与 别 的 网 站 交换 链接 或 加 入 广告 
链接 等 。 

网 站 推广 是 企业 网 站 获得 有 效 访问 的 重要 步骤 ， 合 理 而 科学 的 推广 计划 能 令 企业 网 站 收 
到 预期 的 宣传 效果 。 网 站 推广 作为 电子 商务 服务 的 一 个 独立 分 支 正 显示 出 其 巨大 的 魅力 ， 并 
越 来 越 引 起 企业 的 高 度 重视 和 关注 。 


2. 网 站 维护 


网 站 维护 包括 服务 器 及 相关 软 硬 件 的 维护 、 数 据 库 的 维护 、 网 站 安全 维护 、 网 站 内 容 更 
新 等 。 网 站 维护 是 为 了 让 网 站 能 够 长 期 稳定 地 运行 ， 并 不 断 吸 引 更 多 浏览 者 ， 增 加 访问 量 。 
网 站 要 注意 经 常 更 新 内 容 ， 保 持 内 容 的 新 鲜 ， 不 要 做 好 就 放 在 那儿 不 变 了 。 只 有 不 断 地 
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给 它 补充 新 的 内 容 ， 才 能 够 吸引 住 浏览 者 ， 并 给 浏览 者 留 下 良好 的 印象 ， 只 有 不 断 地 更 新 内 
容 ， 才 能 使 网 站 有 生命 力 。 否 则 网 站 不 仅 不 能 起 到 应 有 的 作用 ， 反 而 会 对 网 站 自身 的 形象 造 
成 不 良 的 影响 。 


4.3 制作 网 页 的 常用 软件 


制作 单一 的 网 页 直接 应 用 某 个 软件 即 可 完成 ， 但 要 制作 生动 有 趣 的 网 页 ， 则 需要 有 图 像 
处 理 软件 ， 如 Photoshop; 动画 制作 软件 ， 如 Flash; 网 页 布局 软件 ， 如 Dreamweaver 等 。 对 
一 个 专业 的 网 页 设计 人 员 来 说 ， 在 建设 一 个 网 站 的 过 程 中 会 同时 应 用 到 Dreamweaver、Flash 
和 Photoshop 三 种 软件 。 


4.3.1 网 页 布局 软件 Dreamweaver CS6 


Adobe Dreamweaver CS6 是 一 款 集 网 页 制作 和 管理 网 站 于 一 身 的 所 见 即 所 得 的 网 页 编辑 
器 ， 用 户 不 需要 编写 复杂 的 代码 ， 利 用 它 可 以 轻而易举 地 制作 出 跨越 平台 限制 和 跨越 浏览 器 
限制 的 充满 动感 的 网 页 。 

Dreamweaver 是 一 款 优秀 的 可 视 化 网 页 制作 工具 ， 即 便 是 那些 既 不 懂 HTML， 也 没 进行 
过 程序 设计 的 用 户 ， 也 可 以 很 容易 上 手 ， 轻 松 制作 出 自己 的 精彩 网 页 。 

Dreamweaver CS6 的 工作 界面 继承 了 原版 本 的 一 贯 风格 ， 有 方便 编辑 的 窗口 环境 和 易于 
辨别 的 工具 列表 ， 无 论 在 使 用 什么 功能 时 出 现 问 题 ， 都 可 以 找到 相关 的 帮助 信息 ， 便 于 初学 
者 使 用 。Dreamweaver CS6 的 工作 界面 如 图 4-14 所 示 。 
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4-14 ”Dreamweaver CS6 的 工作 界面 
4.3.2 图 像 处理 软 件 Photoshop CS6 


Photoshop CS6 是 Adobe 公司 旗下 最 为 出 名 的 图 像 处 理 软件 之 一 ， 其 中 CS 是 Adobe 


Creative Suite 软件 中 后 面 两 个 单词 的 缩写 ， 代 表 “ 创 作 集合 ”， 它 是 一 个 统一 的 设计 环境 。 
了 Photoshop 功能 强大 ， 操 作 界 面 友 好 ， 加 速 了 设计 者 从 想象 创作 到 图 像 实 现 的 过 程 ， 赢 得 了 众 
多 用 户 的 青睐 。 从 功能 上 看 ，Photoshop 可 分 为 图 像 编 辑 、 图 像 合 成 、 校 色调 色 及 特效 制作 四 
部 分 。 

(1) 图 像 编 辑 是 图 像 处 理 的 基础 ，Photoshop 可 用 于 对 图 像 进行 各 种 变换 ， 如 放大 、 缩 
小 、 旋 转 、 倾 斜 、 镜 像 、 透 视 等 ， 也 提供 复制 、 去 除 斑 点 、 修 补 、 修 饰 等 编辑 功能 。 

(2) 图 像 合成 是 指 将 几 幅 图 像 通 过 图 层 操作 、 工 具 应 用 等 合成 为 完整 的 、 传 达 明 确 意义 的 

- 幅 图 像 ， 这 是 美术 设计 的 必 经 之 路 。Photoshop 提供 的 绘图 工具 可 将 外 来 图 像 与 创意 进行 很 
好 的 融合 ， 使 图 像 的 合成 天 衣 无 缝 。 

(3) 校 色 调 色 是 Photoshop 中 深 具 威力 的 功能 之 一 ， 可 方便 快捷 地 对 图 像 的 颜色 进行 明 
暗 、 色 调 的 调整 和 校正 ， 也 可 在 不 同 颜色 之 间 进 行 切 换 ， 以 满足 图 像 在 不 同 领域 (如 网 页 设 
计 、 印 刷 、 多 媒体 等 ) 的 应 用 。 

(4) 特效 制作 在 Photoshop 中 主要 由 滤 镜 、 通 道 及 工具 的 综合 应 用 完成 ， 包 括 图 像 的 特效 
创意 和 特效 字 的 制作 。 油 画 、 浮 驹 、 石 膏 画 、 素 描 等 常用 的 传统 美术 技巧 都 可 借助 于 
了 Photoshop 特效 完成 ， 而 各 种 特效 字 的 制作 更 是 很 多 美术 设计 师 热衷 于 Photoshop 的 原因 。 

Photoshop CS6 的 工作 界面 如 图 4-15 所 示 。 


4-15 ”Photoshop CS6 的 工作 界面 


4.3.3 动画 制作 软件 Flash CS6 


Flash 作为 一 种 创作 工具 ， 可 供 设 计 人 员 和 开发 人 员 用 于 创建 动画 、 视 频 、 演 示 文 稿 、 应 
用 程序 和 其 他 允许 用 户 交 互 的 内 容 。 

Flash 软件 可 以 实现 多 种 动画 特效 。 动 画 是 由 一 帧 帧 的 静态 图 片 在 短 时 间 内 连续 播放 而 形 
成 的 视觉 效果 ， 是 表现 动态 过 程 、 阅 明 抽 象 原理 的 一 种 重要 媒体 。Adobe Flash CS6 的 工作 
界面 如 图 4-16 所 示 。 
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图 4-16 Flash CS6 的 工作 界面 
4.3.4 软件 间 的 相互 关系 


网 页 中 包含 着 多 种 类 型 的 页 面 元 素 ， 要 制作 出 漂亮 、 生 动 的 网 页 ， 是 不 能 仅仅 靠 一 种 软 
AN ”和 件 实现 的 ， 所 以 在 设计 网 站 的 过 程 中 ， 需 要 把 多 种 软件 结合 起 来 使 用 。 通 常 使 用 的 软件 有 上 
| 面 介 绍 的 Dreamweaver、Flash、Photoshop 等 。 对 大 型 网 站 管理 者 来 说 ， 综 合 使 用 这 些 软 件 会 
提高 网 页 的 制作 速度 ， 从 而 提高 工作 效率 。 

在 网 页 设计 中 ，Dreamweaver 主要 用 于 对 页 面 进行 布局 ， 即 将 创建 完成 的 文字 、 图 像 和 
动画 等 元 素 在 Dreamweaver 中 通过 一 定形 式 的 布局 整合 为 一 个 页 面 。 此 外 ， 在 Dreamweaver 
中 还 可 以 方便 地 插入 Flash、ActiveX、JavaScript、Java 和 ShockWave 等 文件 ， 从 而 使 设计 者 

可 以 创建 出 具有 特殊 效果 的 精彩 网 页 ， 如 图 4-17 所 示 。 
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图 4-17 在 Dreamweaver 中 插入 动画 


如 果 网 页 中 只 有 静止 的 图 像 ， 即 使 这 些 图 像 再 怎么 精致 ， 也 会 让 人 感觉 缺少 生动 性 和 活 
泼 性 ， 最 终 会 影响 视觉 效果 和 整个 页 面 的 美观 。 因 此 ， 在 网 页 的 制作 过 程 中 往往 还 需要 适时 
地 插入 一 些 Flash 图 像 。 

在 一 般 网 页 设计 中 ，Flash 主要 用 于 制作 具有 动画 效果 的 导航 条 、Logo、 商 业 广告 条 等 ， 
动画 可 以 更 好 地 表现 设计 者 的 创意 。 由 于 学 习 Flash 本 身 的 难度 不 大 ， 而 且 制 作 含 有 Flash 动 
画 的 页 面 很 容易 吸引 浏览 者 ， 所 以 Flash 动画 已 成 为 当前 网 页 设计 中 不 可 缺少 的 元 素 。 如 图 4-18 
所 示 为 在 Flash CS6 中 播放 动画 。 


使 用 Photoshop， 除 了 可 以 对 网 页 中 要 插入 的 图 像 进行 调整 处 理 外 ， 还 可 以 对 页 面 的 总 体 
布局 进行 调整 。 对 网 页 中 所 出 现 的 GIF 图 像 也 可 使 用 Photoshop CS6 进行 创建 ， 以 获得 更 加 
精彩 的 效果 。 如 图 4-19 所 示 即 为 用 Photoshop 制作 的 网 页 图 片 。 


所 


4-18 在 Flash CS6 中 播放 动画 4-19 ”使 用 Photoshop 制作 网 页 图 片 


了 Photoshop 还 可 以 用 于 对 创建 Flash 动画 所 需 的 素材 进行 制作 、 加 工 和 处 理 操 作 ， 使 网 页 
动画 中 所 表现 的 内 容 更 加 精美 和 引人入胜 。 


4.4 跟 我 练 练 手 
4.4.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
4.4.2 上 机 练习 


练习 1: 查找 网 站 建站 的 方式 。 
练习 2: 熟悉 网 页 制作 的 常用 软件 。 
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4.5 高 手 甜 点 


甜点 1: 常见 的 域名 选取 策略 


域名 是 连接 企业 和 互联 网 网 址 的 纽带 ， 对 于 企业 开展 电子 商务 具有 重要 作用 ， 被 誉 为 网 
络 时 代 的 “环球 商标 ”。 一 个 好 的 域名 会 大 大 增加 企业 在 互联 网 上 的 知名 度 ， 因 此 ， 取 一 个 
好 的 域名 就 显得 十 分 重要 。 域 名 选取 的 常见 方法 如 下 。 

1) 用 企业 名 称 的 英文 翻译 作为 网 站 的 域名 

这 是 许多 企业 选取 域名 的 一 种 方式 ， 这 样 的 域名 特别 适合 于 与 计算 机 、 网 络 和 通信 相关 的 一 
些 行业 。 例 如 ， 中 国电 信 的 域名 是 Chinatelecom.com.cn， 中 国 移动 的 域名 为 chinamobile.com， 
都 是 采用 了 此 种 原则 。 

2) 用 企业 名 称 的 汉语 拼音 作为 网 站 的 域名 

这 是 国内 企业 常见 的 域名 选取 方法 。 这 种 方法 的 最 大 好 处 是 容易 记忆 。 例 如 ， 
huawei.com 是 华为 技术 有 限 公 司 的 域名 ，haier.com 是 海尔 集团 的 域名 。 

3) 用 汉语 拼音 的 谐音 作为 网 站 的 域名 

在 现实 中 ， 采 用 这 种 方法 的 企业 也 不 在 少数 。 例 如 ， 美 的 集团 的 域名 为 midea.com.cn， 
康佳 集团 的 域名 为 konka.com.cn， 新 浪 的 域名 为 sina.com.cn。 


甜点 2: 如 何在 网 上 搜索 特定 格式 的 文件 资料 


在 网 上 搜索 资料 时 ， 有 时 需要 搜索 特定 格式 的 文件 ， 如 PPT 文件 、Word 文件 等 。 这 里 以 
搜索 .doc 格式 的 文件 为 例 ， 介 绍 搜索 特定 格式 文件 的 方法 。 

打开 百度 搜索 页 面 ， 在 搜索 文本 框 中 输入 “网 页 制作 .doc”， 单 击 【 百 度 一 下 】 按 钮 ， 系 
统 将 打开 搜索 结果 页 面 。 这 里 最 重要 的 一 点 就 是 在 输入 搜索 关键 字 时 ， 后 面 一 定 要 加 上 特定 
格式 文件 的 后 级 名 。 
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静态 网 页 制作 篇 


磨 刀 不 误 砍 柴 工 一 一 使 用 Dreamweaver 
CS6 创建 网 站 站 点 

制作 我 的 第 一 个 网 页 一 一 网 页 内 容 之 美 
不 在 网 页 中 迷路 一 一 设计 网 页 超 链接 

让 网 页 互动 起 来 一 一 使 用 网 页 表单 和 行为 
批量 制作 风格 统一 的 网 页 一 一 使 用 模板 


理 网 站 


创建 并 管 


构 ， 加 快 对 站 点 的 设计 ， 提 
利用 Dreamweaver CS6 


CS6 是 一 款 专 业 的 网 页 编辑 软件 ， 利 用 它 可 以 创建 单个 网 页 。 该 


Dreamweaver 
软件 具有 强大 的 站 点 管理 功能 ， 可 以 合理 地 组 织 站 点 结 
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网 页 设计 与 网 站 建设 
案例 课堂 四 一 


5.1 认识 Dreamweaver CS6 的 工作 环境 


在 学 习 如 何 使 用 Dreamweaver CS6 制作 网 页 之 前 ， 先 来 认识 一 下 Dreamweaver CS6 的 工 
作 环 境 。 


5.1.1 案例 1 一 一 启动 Dreamweaver CS6 


完成 Dreamweaver CS6 的 安装 后 ， 就 可 以 启动 Dreamweaver CS6 了 ， 具 体操 作 步 骤 如 下 。 

ED 选择 【开始 】 一 【所 有 程序 】 一 Adobe Dreamweaver CS6 菜单 命令 ， 或 双击 桌面 
上 的 Dreamweaver CS6 快捷 图 标 ， 即 可 启动 Dreamweaver CS6， 并 弹出 【默认 编辑 
器 】 对 话 框 ， 在 其 中 色 选 需要 将 Dreamweaver 设置 为 默认 编辑 器 的 文件 类 型 ， 如 
图 5-1 所 示 。 

单 击 【 确 定 】 按 钮 ， 进 入 Dreamweaver CS6 的 初始 化 界面 。Dreamweaver CS6 
的 初始 化 界面 时 尚 、 大 方 ， 给 人 以 焕然 一 新 的 感觉 ， 如 图 5-2 所 示 。 
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5-1 【默认 编辑 器 】 对 话 框 5-2 ”Dreamweaver CS6 的 初始 化 界面 


国 于 EY 通过 初始 化 界面 ， 便 可 打开 Dreamweaver CS6 工作 区 的 开始 界面 。 在 默认 情况 
下 ，Dreamweaver CS6 的 工作 区 布局 是 以 设计 视图 布局 的 ， 如 图 5-3 所 示 。 

YY 在 开始 界面 中 ， 单 击 【新 建 】 栏 下 边 的 HTML 选项 ， 即 可 打开 Dreamweaver 

CS6 的 工作 界面 ， 如 图 5-4 所 示 。 
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图 5-3 _ Dreamweaver CS6 的 开始 界面 图 5-4 Dreamweaver CS6 的 工作 界面 


5.1.2 ”案例 2 一 一 认识 Dreamweaver CS6 的 工作 区 


在 Dreamweaver CS6 的 工作 区 中 可 以 查看 文档 和 对 象 属性 。 工 作 区 将 许多 常用 的 操作 放 
置 于 工具 栏 中 ， 便 于 快速 地 对 文档 进行 修改 。Dreamweaver CS6 的 工作 区 主要 由 菜单 栏 、 文 
档 工 具 栏 、 文 档 窗口 、 状 态 栏 、【 属 性】 面板 、 工 作 区 切换 器 、 面 板 组 等 组 成 ， 如 图 5-5 
所 示 。 
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图 5-5 Dreamweaver CS6 的 工作 区 
1. 菜单 栏 


菜单 栏 中 包括 10 个 菜单 ， 单 击 每 个 菜单 ， 会 弹出 下 拉 菜 单 ， 利 用 菜单 基本 上 能 够 实现 
Dreamweaver CS6 的 所 有 功能 ， 如 图 5-6 所 示 。 


文件 (月 ”篇 强 ( 喜 看 (V) 插入 (1) 修改 (M) 柯 式 (0) 命令 (站点 ($) 富 口 (W) 者 助 (H) 
图 5-6 菜单 栏 
2. 文档 工具 栏 


文档 工具 栏 中 包含 3 种 文档 窗口 视图 (【 代 码 】、【 拆 分 】 和 【设计 】) 按 钮 、 各 种 查看 选 
项 和 一 些 常用 的 操作 按钮 (如 【在 浏览 器 中 预览 /调试 】)， 如 图 5-7 所 示 。 


| 代码 | 拆 分 [设计 ] 实时 视图 哆 . 电 只 .pF OC 本 是 ;三 | 


图 5-7 文档 工具 栏 
文档 工具 栏 中 常用 选项 的 功能 如 下 。 
(1) 【代码 】 按 钮 : 单 击 该 按钮 ， 仅 在 文档 窗口 中 显示 和 修改 HTML 源 代码 。 
(2) 【 拆 分 】 按 钮 : 单 击 该 按钮 ， 在 文档 窗口 中 同时 显示 HTML 源 代码 和 网 页 的 设计 效果 。 
(3) 【设计 】 按 钮 : 单 击 该 按钮 ， 仅 在 文档 窗口 中 显示 网 页 的 设计 效果 。 
(4) 【实时 视图 】 按 钮 : 单 击 该 按钮 ， 可 以 显示 不 可 编辑 的 、 交 互 式 的 、 基 于 浏览 器 的 文 
档 视图 。 
(5) 【多 屏幕 】 按 钮 喇 ， 单 击 该 按钮 ， 可 以 多 屏幕 浏览 网 页 。 
(6) 【标题 】 文 本 框 : 用 于 设置 或 修改 文档 的 标题 。 
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(07) 【文件 管理 】 按 钮 区 ， 单 击 该 按钮 ， 通 过 下 拉 菜单 可 以 实现 消除 只 读 属性 、 获 取 、 
取出 、 上 传 、 存 回 、 撤 销 取出 、 设 计 备注 以 及 在 站 点 定位 等 功能 。 

(8) 【在 浏览 器 中 预览/ 调试 】 按 钮 恩 ;， 单 击 该 按钮 ， 可 以 在 定义 好 的 浏览 器 中 预览 或 调 
试 网 页 。 

(9) 【刷新 】 按 钮 [加 单 击 该 按钮 ， 可 以 刷新 文档 窗口 的 内 容 。 

(10) 【可 视 化 助理 】 按 钮 名 J， 单 击 该 按钮 ， 可 以 使 用 各 种 可 视 化 助理 来 设计 网 页 。 

(11) 【检查 浏览 器 兼容 】 按 钮 国 ， 单 击 该 按钮 ， 可 以 检查 CSS 是 否 对 各 种 浏览 器 兼容 。 

(12) 【W3C 验证 】 按 钮 鲍 : 单 击 该 按钮 ， 可 以 检测 网 页 是 否 符合 W3C 标准 。 


3. 文档 窗口 
文档 窗口 用 于 显示 当前 创建 和 编辑 的 文档 。 在 该 窗 


口中 ， 可 以 输入 文字 、 插 入 图 片 、 绘 制 表格 等 ， 也 可 以 
对 整个 页 面 进行 处 理 ， 如 图 5-8 所 示 。 


4. 状态 栏 


状态 栏 位 于 文档 窗口 的 底部 ， 包 括 三 个 功能 区 : 标 
签 选 择 器 (显示 和 控制 文档 当前 插入 点 位 置 的 HTML 源 本 5 汪 生 而 癌 
代码 标签 )、 窗 口 大 小 弹出 菜单 (显示 页 面 大 小 ， 允 许 将 
文档 窗口 的 大 小 调整 到 预定 义 或 自 定义 的 尺寸 ) 和 下 载 指 示 器 (估计 下 载 时 间 ， 查 看 传输 时 
间 )， 如 图 5-9 所 示 。 
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Ror RJA lo vg 国 | 549 x 325v 1K/1 和 DUnicode (TF-6) 
图 5-9 状态 栏 
5. 【属性 】 面 板 


【属性 】 面 板 是 非常 重要 的 面板 ， 用 于 显示 在 文档 窗口 中 所 选 元 素 的 属性 ， 并 且 可 以 对 
被 选中 元 素 的 属性 进行 修改 。 该 面板 随 着 选择 元 素 的 不 同 而 显示 不 同 的 属性 ， 如 图 5-10 所 示 。 


《mL| 业 式 0) [元 加 美 元 -BJ 让 注 王 24 | 
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图 5-10 【属性 】 面板 
6. 工作 区 切换 器 


单 击 【 工 作 区 切换 器 】 下 拉 按 钮 ， 可 以 打开 一 些 常 用 的 调 板 。 在 下 拉 菜 单 中 选择 相应 
的 命令 即 可 更 改 页 面 的 布局 ， 如 图 5-11 所 示 。 

7. 【插入 】 面 板 

【插入 】 面 板 中 包含 将 各 种 网 页 元 素 ( 如 图 像 、 表 格 和 AP 元 素 等 ) 插 入 到 文档 时 的 快捷 按 
钮 ， 如 图 5-12 所 示 。 每 个 对 象 都 是 一 段 HTML 代码 ， 插 入 不 同 的 对 象 时 ， 可 以 设置 不 同 的 
属性 。 单 击 相应 的 按钮 ， 可 插入 相应 的 元 素 。 要 显示 【插入 】 面 板 ， 选 择 【 窗 口 】 一 【 插 


入 】 菜 单 命令 即 可 。 
8. 【文件 】 面 板 


【文件 】 面 板 用 于 管理 文件 和 文件 夹 ， 无 论 它们 是 Dreamweaver 站 点 的 一 部 分 还 是 位 于 
远程 服务 器 上 。 在 【文件 】 面 板 中 还 可 以 访问 本 地 磁盘 上 的 全 部 文件 ， 如 图 5-13 所 示 。 
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图 5-11 工作 区 切换 器 图 5-12 【插入 】 面 板 图 5-13 【文件 】 面 板 


5.1.3 ”案例 3 一 一 熟悉 Dreamweaver CS6 的 面板 

【插入 】 面 板 中 包括 8 组 面板 ， 分 别 是 【常用 】 面 板 、【 布 局 】 面 板 、【 表 单 】 面 板 、 
【数据 】 面 板 、Spry 面板 、InContext Editing 面板 、【 文 本 】 面 板 和 【收藏 夹 】 面 板 。 

1. 【常用 】 面 板 


在 【常用 】 面 板 中 ， 用 户 可 以 创建 和 插入 最 常用 的 对 象 ， 如 图 像 和 表格 等 ， 如 图 5-14 
所 示 。 


2.【 布 局】 面板 


在 【插入 】 面 板 中 单 击 【 常 用 】 选 项 旁 的 下 拉 按 钮 ,在 弹出 的 下 拉 列 表 中 选择 【 布 
局 】 选 项 ， 即 可 打开 【布局 】 面 板 ， 如 图 5-15 所 示 。【 布 局 】 面 板 中 包含 插入 表格 、 层 和 框 
架 的 常用 命令 按钮 和 部 分 Spry 工具 按钮 。 


3. 【表单 】 面 板 


在 【插入 】 面 板 中 单 击 【 布 局 】 选 项 旁 的 下 拉 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 【 表 
单 】 选 项 ， 即 可 打开 【表单 】 面 板 ， 如 图 5-16 所 示 。【 表 单 】 面 板 中 包含 一 些 常用 的 创建 表 
单 和 插入 表单 元 素 的 按钮 及 一 些 Spry 工具 按钮 ， 可 以 根据 情况 选择 所 需要 的 域 、 表 单 或 按钮 等 。 


4. 【数据 】 面 板 


在 【插入 】 面 板 中 单 击 【表单 】 选 项 旁 的 下 拉 按 钮 了 ， 在 弹出 的 下 拉 列 表 中 选择 【 数 
据 】 选 项 ， 即 可 打开 【数据 】 面 板 。 该 面板 中 包含 一 些 Spry 工具 按钮 和 常用 的 应 用 程序 按 
钮 ， 如 图 5-17 所 示 。 


5. Spry 面板 
在 【插入 】 面 板 中 单 击 【 数 据 】 选 项 旁 的 下 拉 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 Spry 选 
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项 ， 即 可 打开 Spry 面板 。 该 面板 中 主要 包含 一 些 Spry 工具 按钮 ， 如 图 5-18 所 示 。 
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5-14 【常用 】 面板 图 5-15 【布局 】 面板 图 5-16 【表单 】 面 板 


6.InContext Editing 面板 


InContext Editing 面板 中 包括 两 个 选项 ， 分 别 是 【创建 可 编辑 区 域 】 和 【创建 重复 区 
域 】， 如 图 5-19 所 示 。 
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5-17 【数据 】 面 板 5-18 ”Spry 面板 5-19 InContext Editing 面板 


(1) 【创建 可 编辑 区 域 】: 可 编辑 区 域 定义 了 用 户 可 以 直接 在 浏览 器 中 编辑 的 页 面 区 域 。 

(2) 【创建 重复 区 域 】: InContext Editing 重复 区 域 由 开始 标签 中 包含 ice:repeating 属性 
的 一 对 HTML 标签 构成 。 重 复 区 域 定义 了 用 户 在 浏览 器 中 进行 编辑 时 ， 可 以 “重复 ”和 向 其 
中 添加 内 容 的 页 面 区 域 。 


7.【 文 本】 面板 

【文本 】 面 板 中 主要 包含 对 字体 、 文 本 和 段落 进行 调整 辅助 操作 的 按钮 ， 如 图 5-20 所 示 。 
8. 【收藏 夹 】 面 板 

可 以 将 常用 的 按钮 添加 到 【收藏 夹 】 面 板 中 ， 以 便于 以 后 使 用 ， 如 图 5-21 所 示 。 


5-20 【文本 】 面 板 图 5-21 【收藏 夹 】 面 板 


5.2 创建 站 点 


在 开始 制作 网 页 之 前 ， 需 要 先 定义 一 个 新 站 点 ， 以 便于 更 好 地 利用 站 点 对 文件 进行 管 
理 ， 还 可 以 尽 可 能 减少 链接 与 路 径 方 面 的 错误 。 


5.2.1 案例 4 一 一 创建 本 地 站 点 


Dreamweaver 站 点 是 一 种 管理 网 站 中 所 有 相关 联 文档 的 工具 ， 通 过 站 点 可 以 实现 将 文件 
上 传 到 网 络 服务 器 、 自 动 跟踪 和 维护 、 管 理 文件 以 及 共享 文件 等 功能 。Dreamweaver 中 的 站 
点 包括 本 地 站 点 、 远 程 站 点 和 测试 站 点 三 类 。 
e@ 本 地 站 点 : 用 来 存放 整个 网 站 框架 的 本 地 文件 夹 ， 是 用 户 的 工作 目录 ， 一 般 制 作 网 
页 时 只 需要 建立 本 地 站 点 即 可 。 
e@ ”远程 站 点 : 存储 于 Intemet 服务 器 上 的 站 点 和 相关 文档 。 通 常情 况 下 ， 为 了 不 连接 
Internet 而 对 所 建 的 站 点 进行 测试 ， 可 以 在 本 地 计算 机 上 创建 远程 站 点 ， 来 模拟 真实 
的 Web 服务 器 进行 测试 。 
@ 测试 站 点 : Dreamweaver 处 理 动态 页 面 的 文件 夹 ， 可 以 使 用 此 文件 夹 生 成 动态 内 容 
并 在 工作 时 连接 到 数据 库 ， 以 对 动态 页 面 进行 测试 。 
在 Dreamweaver CS6 中 使 用 向 导 创 建 本 地 站 点 的 具体 操作 步骤 如 下 。 
ED 打开 Dreamweaver CS6， 选 择 【站 点 】 一 【新 建站 点 】 菜 单 命令 ， 弹 出 【站 点 设 
置 对 象 】 对 话 框 ， 输 入 站 点 的 名 称 ， 并 设置 本 地 站 点 文件 夹 的 路 径 和 名 称 ， 然 后 单 
击 【保存 】 按 钮 ， 如 图 5-22 所 示 。 
EE29 本 地 站 点 创建 完成 后 ， 在 【文件 】 面 板 的 【本 地 文件 】 窗 格 中 会 显示 该 站 点 的 
根 目录 ， 如 图 5-23 所 示 。 
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5-22 【站 点 设置 对 象 】 对 话 框 5-23 【本 地 文件 】 窗 格 


5.2.2 ”案例 5 一 一 使 用 【文件 】 面 板 创建 站 点 


在 【文件 】 面 板 中 提供 了 “管理 站 点 ”功能 ， 利 用 该 功能 可 以 创建 站 点 ， 具 体操 作 步 又 
如 下 。 
EEC 打开 【文件 】 面 板 ， 在 左边 的 站 点 下 拉 列 表 框 中 选择 【管理 站 点 】 选 项 ， 如 
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图 5-24 所 示 。 
EDUDD 弹出 【管理 站 点 】 对 话 框 ， 在 该 对 话 框 中 单 击 【新 建站 点 】 按 钮 ， 如 图 5-25 所 示 。 


5-24 【文件 】 面 板 图 5-25 【管理 站 点 】 对 话 框 


EEC 弹出 【站 点 设置 对 象 】 对 话 框 ， 在 该 对 话 框 中 即 可 根据 前 面 介绍 的 方法 创建 本 
地 站 点 ， 如 图 5-26 所 示 。 


图 5-26 【站 点 设置 对 象 】 对 话 框 


5.3 管理 站 点 


设置 好 Dreamweaver CS6 的 站 点 后 ， 还 可 以 对 本 地 站 点 进行 多 方面 的 管理 ， 如 打开 站 
点 、 编 辑 站 点 、 删 除 站 点 及 复制 站 点 等 。 


5.3.1 ”案例 6 一 一 打开 站 点 


站 点 创建 完毕 后 ， 如 果 不 能 一 次 完成 网 站 的 制作 ， 可 以 再 次 打开 站 点 ， 对 站 点 中 的 内 容 
进行 编辑 。 

打开 站 点 的 具体 操作 步骤 如 下 。 

EC 选择 【窗口 】 一 【文件 】 菜 单 命令 ， 打 开 【 文 件 】 面 板 ， 在 左边 的 站 点 下 拉 列 
表 框 中 选择 【管理 站 点 】 选 项 ， 如 图 5-27 所 示 。 

EECIDy 弹出 【管理 站 点 】 对 话 框 ， 单 击 【 您 的 站 点 】 列 表 框 中 的 【我 的 站 点 】 选 
项 ， 如 图 5-28 所 示 。 

EECe) 单 击 【 完 成 】 按 钮 ， 打 开 站 点 ， 如 图 5-29 所 示 。 


图 5-27 【文件 】 面 板 图 5-28 单 击 【 我 的 站 点 】 选 项 图 5-29 打开 的 站 点 
5.3.2 ”案例 7 一 一 编辑 站 点 


创建 了 站 点 之 后 ， 接 下 来 可 以 对 站 点 的 属性 进行 编辑 ， 具 体操 作 步 又 如 下 。 

EC 选择 【站 点 】 一 【管理 站 点 】 菜 单 命 令 ， 打 开 【 管 理 站 点 】 对 话 框 ， 从 中 选 定 
要 编辑 的 站 点 名 称 ， 然 后 单 击 【编辑 当前 选 定 的 站 点 】 按 钮 ， 如 图 5-30 所 示 。 

EEDp 打开 【站 点 设置 对 象 】 对 话 框 ， 从 中 按照 创建 站 点 的 方法 对 站 点 进行 编辑 ， 如 
图 5-31 所 示 。 


图 5-31 编辑 站 点 
Sm 在 【管理 站 点 】 对 话 框 中 双击 站 点 名 称 ， 可 以 直接 打开 【站 点 设置 对 象 〗 对 
直 ” 话 框 


ETEY 编辑 完成 后 单 击 【 保 存 】 按 钮 ， 返 回 【 管 理 站 点 】 对 话 框 ， 然 后 单 击 【 完 成 】 
按钮 ， 即 可 完成 编辑 操作 。 


5.3.3 ”案例 8 一 一 删除 站 点 


如 果 不 再 需要 利用 Dreamweaver 对 本 地 站 点 进行 操作 ， 可 以 将 其 从 站 点 列表 中 删除 ， 具 
体操 作 步 又 如 下 。 
EEJDp 选择 要 删除 的 本 地 站 点 ， 然 后 在 【管理 站 点 】 对 话 框 中 单 击 【 删 除 当前 选 定 的 
站 点 】 按 钮 ， 如 图 5-32 所 示 。 
EGR 弹出 Dreamweaver 对 话 框 ， 提 示 用 户 删除 站 点 操作 不 能 撤销 ， 询 问 是 否 要 删除 
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本 地 站 点 ， 单 击 【 是 】 按 钮 ， 即 可 删除 选 定 的 本 地 站 点 ， 如 图 5-33 所 示 。 


图 5-32 单 击 【 删 除 当前 选 定 的 站 点 】 按 钮 图 5-33 ”信息 提示 框 


rm 删除 站 点 操作 实际 上 只 是 删除 了 Dreamweaver 同 本 地 站 点 之 间 的 关系 ， 而 实际 
站 ”的 本 地 站 点 内 容 (包括 文件 夹 和 文件 等 ) 仍 然 保存 在 磁盘 相应 的 位 置 上 。 因 此 ， 用 户 可 
以 重新 创建 指向 其 位 置 的 新 站 点 ， 重 新 对 其 进行 管理 。 


5.3.4 案例 9 一 一 复制 站 点 


N 如 果 想 创建 多 个 结构 相同 或 类 似 的 站 点 ， 则 可 利用 站 点 的 可 复制 性 实现 。 复 制 站 点 的 具 
体操 作 步 又 如 下 。 
EC 在 【管理 站 点 】 对 话 框 中 单 击 【 复 制 当 前 选 定 的 站 点 】 按 钮 ， 即 可 复制 该 站 
点 ， 如 图 5-34 所 示 。 
ES 复制 出 来 的 新 站 点 名 称 会 出 现在 【管理 站 点 】 对 话 框 的 【您 的 站 点 】 列 表 框 
中 ， 该 名 称 会 在 原 站 点 名 称 的 后 面 添加 “复制 ”字样 ， 如 图 5-35 所 示 。 


图 5-34 单 击 【 复 制 当前 选 定 的 站 点 】 按 钮 5-35 ”复制 的 站 点 


EC 如 果 需 要 更 改 站 点 名 称 ， 选 中 新 复制 的 站 点 ， 单 击 【 编 辑 当 前 选中 的 站 点 】 按 
钮 即 可 。 在 【管理 站 点 】 对 话 框 中 单 击 【 完 成 】 按 钮 ， 即 可 完成 对 站 点 的 复制 操作 。 


5.4 ”操作 站 点 文件 及 文件 夹 


无 论 是 创建 空白 文档 ， 还 是 利用 已 有 的 文档 创建 站 点 ， 都 需要 对 站 点 中 的 文件 夹 或 文件 
进行 操作 。 利 用 【文件 】 面 板 ， 可 以 对 本 地 站 点 中 的 文件 夹 和 文件 进行 创建 、 删 除 、 移 动 和 
复制 等 操作 。 


5.4.1 案例 10 一 一 创建 文件 夹 


站 点 创建 完毕 后 ， 可 以 在 站 点 的 下 方 创建 文件 夹 ， 该 文件 夹 的 主要 作用 是 存放 网 页 的 相 
关 资 料 ， 如 网 页 图 片 、 网 页 中 的 CSS 样式 表 等 。 

在 本 地 站 点 中 创建 文件 夹 的 具体 操作 步骤 如 下 。 

EEC 选择 【窗口 】 一 【文件 】 菜 单 命令 ， 打 开 【 文 件 】 面 板 ， 在 准备 新 建文 件 夹 的 
位 置 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建文 件 夹 】 命 令 ， 如 图 5-36 所 示 。 

EC 新 建文 件 夹 的 名 称 处 于 可 编辑 状态 ， 可 以 对 新 建文 件 夹 重新 命名 ， 如 图 5-37 所 示 。 

ECSRUSD 将 新 建文 件 夹 命名 为 images， 通 常用 此 文件 夹 来 存放 图 片 。 单 击 新 建文 件 夹 以 
外 的 任意 位 置 ， 即 可 完成 文件 夹 的 新 建 和 重 命 名 操作 ， 如 图 5-38 所 示 。 
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5-36 ”选择 【新 建文 件 夹 】 命 令 5-37 ”新 建 的 文件 夹 5-38 重 命名 文件 夹 


5 四 如 果 想 修改 文件 夹 名 ， 选 定 文件 天 后 ， 单 击 文件 夹 的 名 称 或 按 F2 键 ， 激 活 文字 
”使 其 处 于 可 编辑 状态 ， 然 后 输入 新 的 名 称 即 可 。 


5.4.2 ”案例 11 一 一 创建 文件 


文件 夹 创建 好 后 ， 就 可 以 在 文件 夹 中 创建 相应 的 文件 了 ， 具 体操 作 步 又 如 下 。 
EC 选择 【窗口 】 一 【文件 】 菜 单 命 令 ， 打 开 【 文 件 】 面 板 ， 在 准备 新 建文 件 的 位 
置 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建文 件 】 命 令 ， 如 图 5-39 所 示 。 
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EDy 新 建文 件 的 名 称 处 于 可 编辑 状态 ， 可 以 为 新 建文 件 重新 命名 ， 如 图 5-40 所 示 。 
ERB) 新 建 的 文件 名 默认 为 untitled html， 可 将 其 改 为 index.html。 单 击 新 建文 件 以 外 
的 任意 位 置 ， 即 可 完成 文件 的 新 建 和 重 命名 操作 ， 如 图 5-41 所 示 。 


5-39 选择 【新 建文 件 】 命 令 图 5-40 新建 的 文件 5-41 重 命名 文件 


| 5.4.3 案例 12 一 一 移动 和 复制 文件 或 文件 夹 


站 点 下 的 文件 或 文件 夹 可 以 进行 移动 与 复制 操作 ， 有 具体 操作 步骤 如 下 。 

EC 选择 【窗口 】 一 【文件 】 菜 单 命 令 ， 打 开 【 文 件 】 面 板 ， 选 中 要 移动 的 文件 或 
文件 夹 ， 然 后 拖 动 到 相应 的 文件 夹 即 可 ， 如 图 5-42 所 示 。 

EEC 也 可 以 利用 剪 切 和 粘贴 的 方法 来 移动 文件 或 文件 夹 。 在 【文件 】 面 板 中 ， 选 中 
要 移动 或 复制 的 文件 或 文件 夹 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【编辑 】 一 【前 
切 】 或 【拷贝 】 命 令 ， 如 图 5-43 所 示 。 


图 5-42 移动 文件 图 5-43 复制 文件 


5 加 进行 移动 可 以 选择 【 剪 切 】 命 令 ， 进 行 复制 可 以 选择 【拷贝 】 命 令 。 
\ 


国 于 BY 选中 目标 文件 夹 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【编辑 】 一 【粘贴 】 命 令 ， 
这 样 ， 文 件 或 文件 夹 就 会 被 移动 或 复制 到 相应 的 文件 夹 中 。 


[es 


5.4.4 案例 13 一 一 删除 文件 或 文件 夹 


对 于 站 点 下 的 文件 或 文件 夹 ， 如 果 不 再 需要 ， 就 可 以 将 其 删除 ， 具 体操 作 步 骤 如 下 。 

EC 在 【文件 】 面 板 中 ， 选 中 要 删除 的 文件 或 文件 夹 ， 然 后 在 文件 或 文件 夹 上 右 

击 ， 在 弹出 的 快捷 菜单 中 选择 【编辑 】 一 【删除 】 命 令 或 者 按 Delete 键 ， 如 图 5-44 
所 示 。 

芍 于 BY 弹出 提示 对 话 框 ， 询 问 是 否 要 删除 所 选 文件 或 文件 夹 ， 单 击 【 是 】 按 钮 ， 即 可 
将 文件 或 文件 夹 从 本 地 站 点 中 删除 ， 如 图 5-45 所 示 。 
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图 5-44 删除 文件 图 5-45 ”提示 对 话 框 


全 和 站 点 的 删除 操作 不 同 ， 对 文件 或 文件 夹 的 删除 操作 会 从 磁盘 上 真正 地 删除 相应 
SS 的 文件 或 文件 天。 


5.5 ”实战 演练 一 一 建立 站 点 文件 和 文件 夹 


为 了 管理 和 日 后 的 维护 方便 ， 可 以 建立 一 个 文件 夹 来 存放 网 站 中 的 所 有 文件 ， 再 在 文件 
夹 内 建立 几 个 子 文件 夹 ， 将 文件 分 别 放 在 不 同 的 文件 夹 中 ， 如 图 片 可 以 放 在 images 文件 夹 
内 ，HTML 文件 放 在 根 目录 下 等 。 
建立 站 点 文件 和 文件 夹 的 具体 操作 步骤 如 下 。 
GETTY 选择 【窗口 】 一 【文件 】 菜 单 命令 ， 打 开 【 文 件 】 面 板 ， 在 站 点 名 称 “ 我 的 站 
点 ”上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建文 件 】 命 令 ， 如 图 5-46 所 示 。 
ED 浙 建文 件 的 名 称 处 于 可 编辑 状态 ， 如 图 5-47 所 示 。 
EB》 将 新 建文 件 名 untitled html 重 命名 为 index html， 然 后 单 击 新 建文 件 以 外 的 任意 
位 置 ， 完 成 主页 文件 的 创建 ， 如 图 5-48 所 示 。 


网 页 设计 与 网 站 建设 
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5-46 ”选择 【新 建文 件 】 命 令 5-47 ”新 建文 件 图 5-48 重 命名 文件 


EC 在 站 点 名 称 “我 的 站 点 ”上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建文 件 夹 】 命 
令 ， 如 图 5-49 所 示 。 

新 建文 件 夹 的 名 称 处 于 可 编辑 状态 ， 如 图 5-50 所 示 。 

ECEJRD 将 新 建文 件 夹 名 untitled 重 命名 为 “图 片 ”， 此 文件 夹 用 于 存放 图 片 ， 然 后 单 击 
新 建文 件 夹 以 外 的 任意 位 置 ， 完 成 图 片 文件 夹 的 创建 ， 如 图 5-51 所 示 。 
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5-49 选择 【新 建文 件 夹 】 命 令 5-50 ”新 建文 件 夹 图 5-51 重 命名 文件 夹 


5.6” 跟 我 练 练 手 
5.6.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
5.6.2 上 机 练习 


练习 1: 创建 网 站 站 点 。 

练习 2: 管理 网 站 站 点 。 

练习 3: 操作 站 点 文件 与 文件 夹 。 
练习 4: 建立 网 站 站 点 文件 和 文件 夹 。 


5.7 高 手 甜 点 


甜点 1: 在 【资源 〗 面 板 中 ， 为 什么 有 的 资源 在 预览 区 中 无 法 正常 显示 (比如 Flash 动画 ) 


之 所 以 会 出 现 这 种 情况 ， 主 要 是 由 于 不 同类 型 的 资源 有 不 同 的 预览 显示 方式 。 对 于 Flash 
动画 来 说 ， 被 选中 的 Flash 在 预览 区 中 显示 占 位 符 ， 要 观看 其 播放 效果 ， 必 须 单 击 预览 区 中 的 
播放 按钮 。 


甜点 2: 在 Adobe Dreamweaver CS6 中 ，【【 属性】 面板 为 什么 只 显示 了 其 标题 栏 


之 所 以 会 出 现 这 种 情况 ， 主 要 是 由 于 【属性 】 面 板 被 折合 起 来 了 。Adobe Dreamweaver 
CS6 为 了 节省 屏幕 空间 为 各 个 面板 组 都 设计 了 折 车 功能 ， 单 击 该 面板 组 的 标题 名 称 ， 即 可 在 
“展开 / 折 登 ”状态 之 间 切 换 。 同 时 ， 对 于 不 用 的 面板 组 还 可 以 将 其 暂时 关闭 ， 需 要 使 用 时 再 
通过 【窗口 】 菜 单打 开 。 
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制作 我 的 第 一 个 
网 页 一 一 网 页 


浏览 网 页 时 ， 查 看 文本 和 图 像 是 最 直接 的 获取 信息 的 方式 。 文 本 是 基本 的 信息 
载体 ， 不 管 网 页 内 容 如 何 丰富 ， 文 本 自始至终 都 是 网 页 中 最 基本 的 元 素 。 图 像 能 使 
网 页 的 内 容 更 加 丰富 多 彩 、 形 象 生 动 ， 可 以 为 网 页 增色 不 少 。 


2 本 章 要 点 (已 掌握 的 在 方 框 中 打 钧 ) ， 
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网 页 设计 与 网 站 建设 
案例 课堂 四 一 


6.1 文档 的 基本 操作 


使 用 Dreamweaver CS6 可 以 编辑 网 站 的 网 页 ， 该 软件 为 创建 Web 文档 提供 了 灵活 的 
环境 。 


6.1.1 案例 1 一 一 创建 空白 文档 


制作 网 页 的 第 一 步 就 是 创建 空白 文档 ， 使 用 Dreamweaver CS6 创建 空白 文档 的 具体 操作 
步骤 如 下 。 
EEJDgp 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建文 档 】 对 话 框 。 并 在 该 对 话 框 
的 左 侧 选择 【空白 页 】 选 项 ， 在 【页 面 类 型 】 列 表 框 中 选择 HTML 选项 ， 在 【 布 
局 】 列 表 框 中 选择 【< 无 >】 选 项 ， 如 图 6-1 所 示 。 


图 6-1 【新 建文 档 】 对 话 框 图 6-2 ”创建 空白 文档 
6.1.2 ”案例 2 一 一 设置 页 面 属性 


创建 空白 文档 后 ， 接 下 来 需要 对 文件 进行 页 面 属性 的 设置 ， 也 就 是 设置 整个 网 站 页 面 的 
外 观 效果 。 选 择 【 修 改 】 一 【页 面 属性 】 菜 单 命令 ， 如 图 6-3 所 示 ， 或 按 Ctrl+J 组 合 键 ， 打 
开 【 页 面 属 性 】 对 话 框 ， 从 中 可 以 设置 外 观 、 链 接 、 标 题 、 标 题 /编码 和 跟踪 图 像 等 属性 。 下 
面 分 别 介绍 如 何 设置 页 面 的 外 观 、 链 接 、 标 题 等 。 

1. 设置 外 观 

在 【页 面 属 性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【外 观 】 选 项 ， 可 以 设置 CSS 外 观 和 
HIML 外 观 ， 外 观 的 设置 可 以 从 页 面 字 体 、 文 字 大 小 、 文 本 颜色 等 方面 进行 设置 ， 如 图 6-4 
所 示 。 

1) 【页 面 字体 】 


在 【页 面 字体 】 下 拉 列 表 框 中 可 以 设置 文本 的 字体 样式 ， 比 如 这 里 选择 一 种 字体 样式 ， 
然后 单 击 【 应 用 】 按 钮 ， 页 面 中 的 字体 即 可 显示 为 这 种 字体 样式 ， 如 图 6-5 所 示 。 


生活 是 一 首 歌 ， 一 首 五 彩 吃 轨 的 歌 ， 一 首 低沉 而 又 高 吕 的 歌 ， 一 首 入 人 无 流失 
me CN] | 找 的 歌 , 生 洗 中 的 珍 难 因 兰 就是 于 一 个 个 肝 动 的 音符 ， 由 于 这 些 半 符 的 加 入 才 
使 生活 这 得 更 加 甘 怒 。 


6-5 ”设置 页 面 字体 


2) 【大 小 】 
在 【大 小 】 下 拉 列 表 框 中 可 以 设置 文本 的 大 小 ， 这 里 选择 “36”， 在 右 侧 的 单位 下 拉 列 
表 框 中 选择 px 单位 ， 单 击 【 应 用 】 按 钮 ， 页 面 中 的 文本 即 可 显示 为 36px 大 小 ， 如 图 6-6 所 示 。 


| 一 生活 是 一 首 歌 ， 一 首 五 彩 缤纷 的 歌 ， 一 
一 一 ao | 首 低沉 而 又 高 兄 的 歌 一 首 令 人 无 法 
tao 一 区 本 Tamo 一 区 也 摸 的 歌 。 生 活 中 的 艰难 困苦 总 关 下 
个 跳动 的 音符 ， 由 于 这 些 音符 的 加 入 才 
[ue Em a 9 | 使 生活 变 得 更 加 美妙 。 


6-6 设置 页 面 字体 大 小 


3) 【文本 颜色 】 

在 【文本 颜色 】 文本 框 中 输入 文本 显示 颜色 的 十 六 进 制 值 ， 或 者 单 击 文 本 框 左 侧 的 【 选 
择 颅 色 】 按 钮 器， 即 可 在 弹出 的 颜色 选择 器 中 选择 文本 的 颜色 。 单 击 【 应 用 】 按 钮 ， 即 可 看 
到 页 面 字体 呈现 为 选中 的 颜色 ， 如 图 6-7 所 示 。 


i 
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生活 是 一 首 歌 ， 一 首 五 彩 缤纷 的 歌 ， 一 
首 低沉 而 又 高 昂 的 歌 ， 一 首 令 人 无 法 提 
摸 的 歌 。 生 活 中 的 艰难 困苦 就 是 那 一 个 
个 跳动 的 音符 ， 由 于 这 些 音符 的 加 入 才 
使 生活 变 得 更 加 美妙 ,| 


图 6-7 设置 页 面 字体 颜色 
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4) 【背景 颜色 】 
在 【背景 颜色 】 文 本 框 中 可 以 设置 背景 颜色 ， 这 里 输入 墨绿 色 的 十 六 进 制 值 “#09F”， 
完成 后 单 击 【应 用 】 按 钮 ， 即 可 看 到 页 面 背景 呈现 出 所 输入 的 颜色 ， 如 图 6-8 所 示 。 


6-8 设置 页 面 背景 颜色 


5) 【背景 图 像 】 

在 【背景 图 像 】 文 本 框 中 可 直接 输入 网 页 背景 图 像 的 路 径 ， 或 者 单 击 文本 框 右 侧 的 【浏览 】 
按钮 ， 在 弹出 的 【选择 图 像 源 文件 】 对 话 框 中 选择 一 幅 图 像 作 为 网 页 背景 图 像 ， 如 图 6-9 所 示 。 

完成 之 后 单 击 【确定 】 按 钮 返回 【页 面 属性 】 对 话 框 ， 然 后 单 击 【应 用 】 按 钮 ， 即 可 看 
到 页 面 显 示 的 背景 图 像 ， 如 图 6-10 所 示 。 


生活 是 二 前 歌 ,一 冲天 彩 缤纷 的 歌 , 一 
首 [ 氏 沉 而 又 高 铭 的 其 ， 一 首 令 人 无 法 所 
ee 
个 跳动 的 音符 ， 由 于 这 些 音符 的 加 入 才 
使 生 活 变 得 更加 美妙; 


me 


6-9 【选择 图 像 源 文 件 】 对 话 框 图 6-10 设置 页 面 背景 图 片 


6) 【重复 】 

在 【重复 】 下 拉 列 表 框 中 可 以 选择 背景 图 像 在 网 页 中 的 排列 方式 ， 有 不 重复 、 重 复 、 横 向 
重复 和 纵向 重复 4 个 选项 。 比 如 选择 repeat-x( 横 向 重复 ) 选 项 ， 背 景 图 像 就 会 以 横向 重复 的 
排列 方式 显示 ， 如 图 6-11 所 示 。 

7) 【左边 距 】、【 上 边 距 】、【 右 边 距 】 和 【下 边 距 】 

这 4 个 选项 用 于 设置 页 面 四 周边 距 的 大 小 ， 如 图 6-12 所 示 。 


Ci as an 


图 6-11 设置 背景 图 像 的 排列 方式 图 6-12 设置 页 面 四 周边 距 


国 【背景 图 像 〗 和 【背景 颜色 】 不 能 同时 显示 。 如 果 在 网 页 中 同时 设置 这 两 个 先 
项 ， 在 浏览 网 页 时 则 只 显示 网 页 的 背景 图 像 。 


2. 设置 链接 

在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【链接 】 选 项 ， 可 以 设置 链接 的 属性 ， 
如 图 6-13 所 示 。 

3. 设置 标题 

在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【标题 】 选 项 ， 可 以 设置 标题 的 属性 ， 
如 图 6-14 所 示 。 


图 6-13 设置 页 面 的 链接 图 6-14 设置 页 面 标题 


4. 设置 标题 /编码 
在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【标题 /编码 】 选 项 ， 可 以 设置 标题 /编码 
的 属性 ， 比 如 网 页 的 标题 、 文 档 类 型 和 网 页 中 文本 的 编码 ， 如 图 6-15 所 示 。 


5. 设置 跟踪 图 像 
在 【页 面 属性 】 对 话 框 的 【分 类 】 列 表 框 中 选择 【跟踪 图 像 】 选 项 ， 可 以 设置 跟踪 图 像 


的 属性 ， 如 图 6-16 所 示 。 YY 
pm 
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图 6-15 设置 标题 /编码 图 6-16 设置 跟踪 图 像 


1) 【跟踪 图 像 】 
在 【跟踪 图 像 】 文 本 框 中 可 以 设置 作为 网 页 跟踪 图 像 的 文件 路 径 ， 也 可 以 单 击 文本 框 右 


侧 的 【浏览 】 按 钮 ， 在 弹出 的 对 话 框 中 选择 一 幅 图 像 作为 跟踪 图 像 ， 如 图 6-17 所 示 。 


5 例 
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跟踪 图 像 是 Dreamweaver 中 非常 有 用 的 功能 。 使 用 这 个 功能 ， 可 以 先 用 平面 设计 工具 设 
计 出 页 面 的 平面 版 式 ， 再 以 跟踪 图 像 的 方式 导入 到 页 面 中 ， 这 样 用 户 在 编辑 网 页 时 即 可 精确 


地 定位 页 面 元 素 。 


2) 【透明 度 】 
拖 动 【 透 明度 】 滑 块 ， 可 以 调整 图 像 的 透明 度 ， 透 明度 越 高 ， 图 像 越 明显 ， 如 图 6-18 


所 示 。 
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图 6-17 添加 图 像 文件 图 6-18 设置 图 像 的 透明 度 


重地 使 用 了 跟踪 图 像 后 ， 原 来 的 背景 图 像 不 会 显示 。 但 是 在 正 浏览 器 中 预览 时 ， 会 
放 和 显示 出 页 面 的 真实 效果 ， 而 不 会 显示 跟踪 图 像 。 


6.2 用 文字 美化 网 页 


所 谓 设置 文本 属性 ， 主 要 是 对 网 页 中 的 文本 格式 进行 编辑 和 设置 ， 包 括 文 本 字体 、 文 本 
颜色 、 字 体 样式 等 。 


6.2.1 案例 3 一 一 插入 文 宇 


文字 是 基本 的 信息 载体 ， 是 网 页 中 最 基本 的 元 素 之 一 。 在 网 页 中 运用 丰富 的 字体 、 多 样 
的 格式 及 赏心悦目 的 文字 效果 ， 对 网 站 设计 师 来 说 是 必 不 可 少 的 技能 。 

在 网 页 中 插入 文字 的 具体 操作 步骤 如 下 。 

EC 选择 【文件 】 一 【打开 】 菜 单 命令 。 弹 出 【打开 】 对 话 框 ， 在 【查找 范围 】 下 
拉 列 表 框 中 定义 打开 文件 的 位 置 为 “ch06\ 插 入 文本 \ 插 入 文本 .html”， 然 后 单 击 【 打 
开 】 按 钮 ， 如 图 6-19 所 示 。 

ED 随即 打开 随 书 光盘 中 的 素材 文件 ， 然 后 将 光标 放置 在 文档 的 编辑 区 ， 如 图 6-20 
所 示 。 


区 于 BY 输入 文字 ， 如 图 6-21 所 示 。 
ETZ> 选择 【文件 】--【 另 存 为 】 菜 单 命令 ， 将 文件 保存 为 “cho6\ 插 入 文本 \ 插 入 文本 


后 .html”， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 6-22 所 示 。 
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图 6-21 输入 文字 图 6-22 预览 网 页 


7 在 输入 文本 的 过 程 中 ， 换 行 时 如 果 直 接 按 Enter 键 ， 行 间距 会 比较 大 。 一 般 情况 
慌 下 ， 在 网 页 中 换行 时 按 Shift + Enter 组 合 键 ， 这 样 才 是 正常 的 行距 。 


也 可 以 在 文档 中 添加 换行 符 来 实现 文本 换行 ， 有 如 下 两 种 操作 方法 。 

(1) 选择 【窗口 】 一 【插入 】 菜 单 命令 ， 打 开 【 插 入 】 面 板 ， 然 后 单 击 【文本 】 选 项 卡 中 
的 【字符 】 图 示 ， 在 弹出 的 列表 中 选择 【换行 符 】 选 项 ， 如 图 6-23 所 示 。 

(2) 选择 【插入 】 一 HTML 一 【特殊 字符 】 一 【换行 符 】 菜 单 命令 ， 如 图 6-24 所 示 。 
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Immental 
6-23 ”换行 符 6-24 选择 【换行 符 】 菜 单 命令 


网 页 设计 与 网 站 建设 
案例 课堂 >… 


6.2.2 ”案例 4 一 一 设置 字体 

插入 网 页 文字 后 ， 用 户 可 以 根据 自己 的 需要 对 插入 的 文字 进行 设置 ， 包 括 字 体 样式 、 字 
体 大 小 、 字 体 颜色 等 。 

1. 设置 字体 

对 网 页 中 的 文本 进行 字体 设置 的 具体 步骤 如 下 。 

EDODp 打开 随 书 光盘 中 的 “ch06\ 插 入 文本 \ 插 入 文本 后 html” 文件。 在 文档 窗口 中 ， 选 


定 要 设置 字体 的 文本 ， 如 图 6-25 所 示 。 
EEJDp 在 下 方 的 【属性 】 面 板 中 ， 在 【字体 】 下 拉 列 表 框 中 选择 字体 ， 如 图 6-26 所 示 。 


图 6-25 选择 文本 图 6-26 选择 字体 

EC) 选中 的 文本 即 可 改变 为 所 选 字体 。 

2. 无 字体 提示 的 解决 方法 

如 果 字 体 列表 中 没有 所 要 的 字体 ， 可 以 按照 如 下 方法 编辑 字体 列表 ， 有 具体 操作 步骤 如 下 。 


EC 在 【属性 】 面 板 的 【字体 】 下 拉 列 表 框 中 选择 【编辑 字体 列表 】 选 项 ， 打 开 【 编 
辑 字体 列表 】 对 话 框 ， 如 图 6-27 所 示 。 


ECERP9 在 【可 用 字体 】 列 表 框 中 选择 要 使 用 的 字体 ， 然 后 单 击 && 按 钮 ， 所 选 字体 就 会 
出 现在 左 侧 的 【选择 的 字体 】 列 表 框 中 ， 如 图 6-28 所 示 。 


6-27 【编辑 字体 列表 】 对 话 框 图 6-28 选择 需要 添加 的 字体 样式 


全 【选择 的 字体 了 列表 框 中 显示 当前 已 选 定 的 字体 名 称 ; 【可 用 字体 】〗 列 表 框 中 显 
示 当 前 所 有 可 用 的 字体 名 称 。 

ES 如 果 要 创建 新 的 字体 列表 ， 可 以 从 【字体 列表 】 列 表 框 中 选择 【( 在 以 下 列表 中 
添加 字体 )】 选 项 。 如 果 没 有 出 现 该 选项 ， 可 以 单 击 对 话 框 左上 角 的 四 按钮 添加 ， 如 
图 6-29 所 示 。 

EEC 要 从 字体 组 合 项 中 删除 字体 ， 可 以 从 【字体 列表 】 列 表 框 中 选 定 该 字体 组 合 
项 ， 然 后 单 击 列表 框 左上 角 的 加 按钮， 设置 完成 单 击 【 确 定 】 按 钮 即 可 ， 如 图 6-30 
所 示 。 

en 一 般 来 说 ， 应 尽量 在 网 页 中 使 用 宋体 或 黑体 ， 不 使 用 特殊 的 字体 ， 因 为 浏览 网 页 
的 计算 机 中 如 果 没有 安装 这 些 特殊 的 字体 ， 在 浏览 时 就 只 能 以 普通 的 默认 字体 来 显 
示 。 对 中 文 网 页 来 说 ， 应 该 尽量 使 用 宋体 或 黑体 ， 因 为 大 多 数 的 计算 机 中 都 默认 装 有 


这 两 种 字体 。 


图 6-29 添加 选择 的 字体 图 6-30 ”删除 选择 的 字体 


6.2.3 ”案例 5 一 一 设置 字号 


字号 是 指 字体 的 大 小 。 在 Dreamweaver CS6 中 设置 文字 字号 的 具体 步骤 如 下 。 
加 打开 随 书 光盘 中 的 “ch06\ 插 入 文本 \ 插 入 文本 后 .html” 文 件 ， 选 定 要 设置 字号 的 
文本 ， 如 图 6-31 所 示 。 


图 6-31 选择 需要 设置 字号 的 文本 
EEJPp 在 【属性 】 面 板 的 【大 小 】 下 拉 列 表 框 中 选择 字号 ， 这 里 选择 “18”， 如 图 6-32 


漂 和 N 世 对 喇 习 一 一 喇 习 全 | 波 否 浊 


网 页 设计 与 网 站 建设 
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> HL 目标 规则 “ 声 css 规则 > ”| 字体 多 黑体 ~B 了 二 入 本 本 

Bcss En ED :|| 

加 单元 格 水平 C) 可 认 宽 轨 不 换行 o) 门 背景 颜色 (6) 全 J| ] 
口交 三 直 CBN ”| 高 标题 四 口 


图 6-32 【属性 】 面板 
ECERB9 这 样 选中 的 文本 字体 大 小 将 更 改 为 18Px， 如 图 6-33 所 示 。 


Sn 如 果 希 望 设 置 字符 相对 默认 字符 大 小 的 增 减 量 ， 可 以 在 【大 小 〗 下 拉 列 表 框 中 选 
忌 择 xx-small、xx-large 或 smaller 等 选项 。 如 果 和 希望 取消 对 字号 的 设置 ， 可 以 选择 
【无 】〗 选 项 。 


6-33 ”设置 字号 后 的 文本 显示 效果 


6.2.4 案例 6 一 一 设置 字体 颜色 


多 彩 的 字体 颜色 会 增强 网 页 的 表现 力 。 在 Dreamweaver CS6 中 ， 设 置 字体 颜色 的 具体 步 
又 如 下 。 
EC 打开 随 书 光盘 中 的 “ch06\ 设 置 文本 属性 \ 设 置 文本 属性 .html” 文 件 ， 选 定 要 设置 
字体 颜色 的 文本 ， 如 图 6-34 所 示 。 
本 于 3 在 【属性 】 面 板 中 单 击 【文本 颜色 】 按钮 同 ， 打 开颜 色 选 择 器 ， 从 中 选择 需要 
的 颜色 ， 如 图 6-35 所 示 ， 也 可 以 直接 在 该 按钮 右边 的 文本 框 中 输入 颜色 的 十 六 进 制 
数值 。 


Sm 设置 颜色 也 可 以 选择 【格式 〗 一 【颜色 】 菜 单 命令 ， 弹 出 【颜色 】 对 话 框 ， 从 中 
A 选择 需要 的 颜色 ， 然 后 单 击 【 确 定 】〗 按 钮 即 可 ， 如 图 6-36 所 示 。 


国 于 BY 选 定 颜色 后 ， 选 中 的 文本 将 更 改 为 选 定 的 颜色 ， 如 图 6-37 所 示 。 


名 调 四 :1600 红 0): 0 

饮 和 度 6); 0 绍 的 :0 

] 柄 Mo 襄 记 DD: 9 号 m:0 
[Cima |] 


图 6-36 【颜色 】 文本 框 
6.2.5 “案例 7 一 一 设置 字体 样式 


字体 样式 是 指 字体 的 外 观 显示 样式 ， 如 字体 的 加 粗 、 倾 斜 、 加 下 划 线 等 


6-35 ”设置 文本 颜色 


室 
各 的 日 2) 


6-37 ”设置 的 文本 颜色 


Dreamweaver CS6 可 以 设置 多 种 字体 样式 ， 具 体操 作 步 又 如 下 。 
本 TI 选 定 要 设置 字体 样式 的 文本 ， 如 图 6-38 所 示 。 
本 于 BY 选择 【格式 】 一 【样式 】 菜 单 命令 ， 弹 出 子 菜单 ， 如 图 6-39 所 示 。 
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图 6-39 设置 文本 样式 


。 利 用 
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网 页 设计 与 网 站 建设 


案例 课堂 ~ 
子 菜 单 中 各 选项 的 含义 如 下 。 
1) 粗 体 
从 子 菜单 中 选择 【 粗 体 】 菜 单 命 令 ， 可 以 将 选 定 的 文字 加 粗 显示 ， 如 图 6-40 所 示 。 
2) 斜体 
从 子 菜单 中 选择 【和 斜体】 菜单 命令 ， 可 以 将 选 定 的 文字 显示 为 斜体 样式 ， 如 图 6-41 
所 示 。 
铀 禾 日 当 午 铠 禾 日 当 午 
汗 滴 禾 下 土 | 池 湾 天 下 孝 | 
图 6-40 设置 文字 为 粗 体 图 6-41 设置 文字 为 斜体 
3) 下 划 线 
从 子 菜单 中 选择 【下 划 线 】 菜 单 命令 ， 可 以 在 选 定 文字 的 下 方 显示 一 条 下 划 线 ， 如 图 6-42 
所 示 。 


| 也 可 以 利用 【属性 】 面 板 设置 字体 的 样式 。 选 定 字体 后 ， 单 击 【 属 性 了 面板 中 的 


示 


汇 。 加 按钮 为 加 粗 样式 ， 单 击 国 按 钮 为 儿 体 样式 ， 如 图 6-43 所 示 。 
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图 6-42 添加 下 划 线 图 6-43 【属性 】 面板 
pr 还 可 以 使 用 快捷 键 设置 或 取消 字体 样式 。 按 CtrltB 组 合 键 ， 可 以 使 选 定 的 文本 加 
粗 ; 按 CtrltI 组合 键 ， 可 以 使 选 定 的 文本 倾斜 。 
4) 删除 线 


从 子 菜单 中 选择 【删除 线 】 菜 单 命令 ， 可 以 在 选 定 文字 的 中 部 横贯 一 条 横 线 ， 表 明文 字 
被 删除 ， 如 图 6-44 所 示 。 


5) 打字 型 
从 子 菜单 中 选择 【打字 型 】 菜 单 命令 ， 可 以 将 选 定 的 文本 作为 等 宽度 文本 来 显示 ， 如 图 6-45 
所 示 。 
钢 禾 日 当 午 铠 禾 日 当 午 
闻 注 天 大 二 订 沪 和 天 下 圭 
图 6-44 ”添加 删除 线 图 6-45 ”设置 字体 的 打字 效果 


Sn 所 谓 等 宽度 字体 ， 是 指 每 个 字符 或 字母 的 宽度 相同 。 


6) 强调 

从 子 菜单 中 选择 【强调 】 菜 单 命令 ， 表 明 选 定 的 文字 需要 在 文件 中 被 强调 。 大 多 数 浏览 
器 会 把 它 显 示 为 斜体 样式 ， 如 图 6-46 所 示 。 

7) 加 强 

从 子 菜单 中 选择 【加 强 】 菜 单 命令 ， 表 明 选 定 的 文字 需要 在 文件 中 以 加 强 的 格式 显示 。 
大 多 数 浏览 器 会 把 它 显示 为 粗 体 样式 ， 如 图 6-47 所 示 。 


铀 禾 日 当 午 铀 禾 日 当 午 
闻 湾 天 下 二 汗 滴 禾 下 土 
6-46 ”添加 强调 效果 图 6-47 添加 加 强 效 果 
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6.2.6 ”案例 8 一 一 编辑 段落 


段落 指 的 是 一 段 格 式 上 统一 的 文本 。 在 文件 窗口 中 每 输入 一 段 文字 ， 按 Enter 键 后 ， 就 会 
自动 地 形成 一 个 段落 。 编 辑 段 落 主要 是 对 网 页 中 的 一 段 文 本 进行 设置 。 


1. 设置 段落 格式 


使 用 【属性 】 面 板 中 的 【格式 】 下 拉 列 表 框 ， 或 选择 【格式 】 一 【段落 格式 】 菜 单 命 
令 ， 都 可 以 设置 段落 格式 。 其 具体 操作 步骤 如 下 。 
EC 将 光标 放置 在 段落 中 任意 一 个 位 置 ， 或 选择 段落 中 的 一 些 文本 ， 如 图 6-48 
所 示 。 
EEC 选择 【格式 】 一 【段落 格式 】 子 菜单 中 的 菜单 命令 ， 如 图 6-49 所 示 。 
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6-48 选中 段落 6-49 选择 【段落 格式 】 子 菜单 命令 
5 天 也 可 以 在 【属性 】 面 板 的 【格式 〗】 下 拉 列 表 框 中 选择 一 个 选项 ， 如 图 6-50 所 示 。 
\ 


6-50 【属性 】 面板 


网 页 设计 与 网 站 建设 
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EEIe) 选择 一 个 段落 格式 (如 【标题 1】)， 然 后 单 击 【 拆 分 】 按 钮 ， 在 代码 视图 下 可 以 
看 到 与 所 选 格式 关联 的 HTML 标签 (如 表示 标题 1 的 hl、 表 示 预 先 格式 化 的 文本 的 
pre 等 ) 将 应 用 于 整个 段落 ， 如 图 6-51 所 示 。 

YY 在 段落 格式 中 对 段落 应 用 标题 标签 时 ，Dreamweaver 会 自动 地 添加 下 一 行文 本 
作为 标准 段落 ， 如 图 6-52 所 示 。 


pr 车 要 更 改 此 设置 ， 可 以 选择 【编辑 一 【首选 参数 】〗】 菜 单 命令 ， 弹 出 【首选 参 


半数 〗 对 话 框 ， 然 后 在 【常规 】 分 类 中 的 【编辑 选项 〗 选 项 组 中 ， 取 消 勾 选 【标题 后 切 
换 到 普通 段落 〗 复 选 框 ， 如 图 6-53 所 示 。 


| 要 是 邓 同 页 中 的 二 及 “ 
| 文本 进行 
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| | 格 
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6-52 ”添加 段落 标签 


6-53 【首选 参数 】 对 话 框 


2， 设置 段落 的 对 齐 方式 


段落 的 对 章 方式 是 指 段落 相对 文件 窗口 (或 浏览 器 窗口) 在 水 平 位 置 的 对 齐 方式 ， 有 4 种 对 
齐 方式 : 左 对 齐 、 居 中 对 齐 、 右 对 齐 和 两 端 对 齐 。 

对 齐 段落 的 具体 步骤 如 下 。 

ECGOUDD 将 光标 放置 在 要 设置 对 齐 方式 的 段落 中 。 如 果 要 设置 多 个 段落 的 对 齐 方式 ， 则 

选择 多 个 段落 ， 如 图 6-54 所 示 。 

EDUD) 进行 下 列 操作 之 一 。 

(1) 选择 【格式 】 一 【对 齐 】 菜 单 命令 ， 然 后 从 子 菜单 中 选择 相应 的 对 齐 方式 ， 如 图 6-55 
所 示 。 

CO) 单 击 【属性 】 面 板 CSS 选项 卡 中 的 对 齐 按钮 ， 如 图 6-56 所 示 。 
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图 6-54 选择 多 个 段落 


图 6-56 单 击 对 齐 按钮 


可 供 选 择 的 按钮 有 4 个 。 


【 左 对 齐 】 按 钮 男 : 单 击 该 按钮 ， 可 以 设置 段落 相对 文档 窗口 左 对 齐 ， 如 图 6-57 
所 示 。 
【居中 对 齐 】 按 钮 驾 : 单 击 该 按钮 ， 可 以 设置 段落 相对 文档 窗口 居中 对 齐 ， 如 图 6-58 
所 示 。 


LEE BED 


设置 段落 格式 
接生 指 的 是 一 | 人 A, 
(i 个 展 瑚 。 这 众 及 隙 主要 


人 CY 
玉 【要 入 格式 】 芭 间 向 守 ， 半 可 以 设 E 职 各 相 


图 6-57 段落 左 对 齐 


【 右 对 齐 】 按 钮 图 : 
所 示 。 
【两 端 对 齐 】 按 钮 车 : 
所 示 。 
Cer -ox 
设置 段落 格式 i 
舟 落 指 的 是 一 段 格式 上 统一 的 文本 。 在 文件 军 口 中 每 输入 一 让 


六 审 ， 按 【Entr] 机 后 ， 人 人 要 
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图 6-59 段落 右 对 齐 


设置 段落 格式 


生殖 指 的 量 一 下 格式 上 统一 的 文本 。 在 文件 窗口 中 每 输 和 一段 


文字 按 【Ealer] 性 后 ， 就 全 自动 地 条 由 一 个 咎 蘑 。 据 辑 自 落 主 型 


是 对 奖 页 中 的 一 诺 文本 进行 设置， 
使 用 【 操 性 ] 硬 术 让 准将 式 】 下拉 台 表 ， 或 迁 择 【将 式 】 


下 【 卫 攻 术 式 】 傈 单 向 伺 ， 都 可 以 设置 彼 巷 粘 式 。 


图 6-58 段落 居中 对 齐 
单 击 该 按钮 ， 可 以 设置 段落 相对 文档 窗口 右 对 齐 ， 如 图 6-59 


单 击 该 按钮 ， 可 以 设置 段落 相对 文档 窗口 两 端 对 齐 ， 如 图 6-60 
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图 6-60 段落 两 端 对 齐 
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网 页 设计 与 网 站 建设 
案例 课堂 四 ~ 


3. 设置 段落 缩 进 

在 强调 一 段 文字 或 引用 其 他 来 源 的 文字 时 ， 需 要 对 文字 进行 段落 缩 进 ， 以 表示 和 普通 自 
沙 有 区 别 。 缩 进 主要 是 指 内 容 相对 于 文档 窗口 (或 浏览 器 窗口) 左 端 产生 的 间距 。 

实现 段落 缩 进 的 具体 步 又 如 下 。 

ET 将 光标 放置 在 要 设置 缩 进 的 段落 中 。 如 果 要 缩 进 多 个 段落 ， 则 选择 多 个 段落 ， 


如 图 6-61 所 示 。 
EC 选择 【格式 】 一 【 缩 进 】 菜 单 命令 ， 即 可 将 当前 段落 往 右 缩 进 一 段 位 置 ， 如 
图 6-62 所 示 。 
Er -a 
设置 段 沙 格 式 1 Er 四 


mE ON 是 则 三 吧 ,it 


图 6-61 选择 段落 图 6-62 ”段落 缩 进 
单 击 【属性 】 面 板 中 的 【删除 内 缩 区 块 】 按 钮 区 和 【内 缩 区 块 〗】 按 钮 图 ， 即 可 实现 当前 
段落 的 凸 出 和 缩 进 。 凸 出 是 指 将 当前 段落 往 左 恢复 一 段 缩 进位 置 。 
;| 也 可 以 使 用 快捷 键 来 实现 缩 进 。 按 Ctrl + Alt + ] 组 合 键 可 以 进行 一 次 右 缩 进 ， 按 
外 ctl+Alt+ [组 合 键 可 以 向 左 恢复 一 段 缩 进 位 置 。 


6.2.7 案例 9 一 一 检查 拼写 


如 果 要 对 英文 材料 进行 检查 更 正 ， 可 以 使 用 Dreamweaver CS6 中 的 检查 拼写 功能 。 其 具 

体操 作 步 又 如 下 。 

本 TI 选择 【命令 】 一 【检查 拼写 】 菜 单 命令 ， 可 以 检查 当前 文档 中 的 拼写 。【 检 查 
拼写 】 命 令 忽 略 HTML 标签 和 属性 值 ， 如 图 6-63 所 示 。 

EEJPy 在 默认 情况 下 ， 拼 写 检查 器 使 用 美国 英语 拼写 字典 。 要 更 改 字 典 ， 可 以 选择 
【编辑 】 一 【首选 参数 】 菜 单 命令 。 在 弹出 的 【首选 参数 】 对 话 框 中 选择 【常规 】 
分 类 ， 在 【拼写 字典 】 下 拉 列 表 框 中 选择 要 使 用 的 字典 ， 然 后 单 击 【 确 定 】 按 钮 即 
可 ， 如 图 6-64 所 示 。 

EEJBp 选择 【检查 拼写 】 菜 单 命令 后 ， 如 果 文本 内 容 中 有 错误 ， 就 会 弹出 【检查 拼 
写 】 对 话 框 ， 如 图 6-65 所 示 。 

EC 在 使 用 检查 拼写 功能 时 ， 如 果 单 词 的 拼写 没有 错误 ， 则 会 弹出 如 图 6-66 所 示 的 
提示 对 话 框 。 

EB 单 击 【是 】 按 钮 ， 弹 出 如 图 6-67 所 示 提 示 对 话 框 ， 然 后 单 击 【 确 定 】 按 钮 ， 关 
闭 提示 对 话 框 即 可 。 


6-64 【首选 参数 】 对 话 框 


>】 Dreamweaver 已 经 到 达 文 禄 细 二 ， 
个 过 生 站 过 人 头 愉 覃 污 ? 
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图 6-65 【检查 拼写 】 对 话 框 6-66 ”检查 提示 对 话 框 6-67 ”完成 提示 对 话 框 


6.2.8 ”案例 10 一 一 创建 项 目 列表 


列表 就 是 那些 具有 相同 属性 元 素 的 集合 。Dreamweaver CS6 常用 的 列表 有 无 序列 表 和 有 
序列 表 两 种 : 无 序列 表 使 用 项 目 符号 来 标记 无 序 的 项 目 ， 有 序列 表 使 用 编号 来 记录 项 目的 
顺序 。 


1. 无 序列 表 


在 无 序列 表 中 ， 各 个 列表 项 之 间 没 有 顺序 级 别 之 分 ， 通 常 使 用 一 个 项 目 符号 作为 每 个 列 
表 项 的 前 级 。 

设置 无 序列 表 的 具体 步骤 如 下 。 

ED 将 光标 放置 在 需要 设置 无 序列 表 的 文档 中 ， 如 图 6-68 所 示 。 

EC 选择 【格式 】 一 【列表 】 一 【项 目 列表 】 菜 单 命令 ， 如 图 6-69 所 示 。 


Gy EI EE 


6-68 ”设置 无 序列 表 图 6-69 选择 【项 目 列表 】 菜 单 命令 


ET 光标 所 在 的 位 置 将 出 现 默认 的 项 目 符号 ， 如 图 6-70 所 示 。 
ED 重复 以 上 步骤 ， 设 置 其 他 文本 的 项 目 符号 ， 如 图 6-71 所 示 。 


9 人 
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案例 课堂 ~ 
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6-70 ”添加 无 序 序号 图 6-71 无 序列 表 
2， 有 序列 表 


对 于 有 序 编号 ， 可 以 指定 其 编号 类 型 和 起 始 编号 。 可 以 采用 阿拉 伯 数 字 、 大 写字 母 或 罗 


马 数 字 等 作为 有 序列 表 的 编号 。 


设置 有 序列 表 的 具体 步骤 如 下 。 
ECDD 将 光标 放置 在 需要 设置 有 序列 表 的 文档 中 ， 如 图 6-72 所 示 。 
EEC 选择 【格式 】 一 【列表 】 一 【编号 列表 】 菜 单 命令 ， 如 图 6-73 所 示 。 


re CL EGES 


6-72 设置 有 序列 表 6-73 ”选择 【编号 列表 】 菜 单 命令 


光标 所 在 的 位 置 将 出 现 编号 列表 ， 如 图 6-74 所 示 。 
EC 重复 以 上 步骤 ， 设 置 其 他 文本 的 编号 列表 ， 如 图 6-75 所 示 。 
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6-74 设置 有 序列 表 6-75 ”有 序列 表 效果 


列表 还 可 以 嵌 套 。 钳 套 列 表 是 包含 其 他 列表 的 列表 。 

EEJDp 选 定 要 嵌 套 的 列表 项 。 如 果 有 多 行文 本 需要 嵌 套 ， 可 以 选 定 多 行 。 

ECDy 单 击 【 属 性 】 面 板 中 的 【 缩 进 】 按 钮 图 (或 者 选择 【格式 】 一 【 缩 进 】 菜 单 命 
令 )， 如 图 6-76 所 示 。 列 表 嵌 套 效果 如 图 6-77 所 示 。 


pa 在 【属性 】 面 板 中 直接 单 南 王 或 国 按 钮 ， 可 以 将 选 定 的 文本 设置 成 项 目 (无 序 ) 列 


汇 。 表 或 编号 有 序 ) 列 表 。 


图 6-76 【属性 】 面 板 图 6-77 列表 嵌 套 效果 


6.3 用 图 像 美 化 网 页 


无 论 是 个 人 网 站 还 是 企业 网 站 ， 图 文 并 茂 的 网 页 都 能 为 网 站 增色 不 少 。 用 图 像 美化 网 页 
会 使 网 页 变 得 更 加 美观 、 生 动 ， 从 而 吸引 更 多 浏览 者 。 


6.3.1 案例 11 一 一 插入 图 像 


网 页 中 通常 使 用 的 图 像 格式 有 3 种 ， 即 GIF、JPEG 和 PNG， 下 面 介 绍 它们 各 自 的 特性 。 

@ GIF 格式 。 网 页 中 最 常用 的 图 像 格式 是 GIF， 其 特点 是 图 像 文 件 占用 磁盘 空间 小 ， 支 
持 透 明 背 景 和 动画 ， 多 用 于 图 标 、 按 钮 、 滚 动 条 、 背 景 等 。 

e@ JPEG 格式 。JPEG 格式 是 一 种 图 像 压缩 格式 ， 主 要 用 于 摄影 图 片 的 存储 和 显示 ， 文 
件 的 扩展 名 为 .jpg 或 .jpeg。 

e PNG 格式 。PNG 格式 汲取 了 GIF 格式 和 JPEG 格式 的 优点 ， 存 储 形式 丰富 ， 兼 有 
GIF 格式 和 JPEG 格式 的 色彩 模式 ， 采 用 无 损 压 缩 方式 来 减 小 文件 的 大 小 。 

在 文件 中 插入 漂亮 的 图 像 会 使 网 页 更 加 美观 ， 使 页 面 更 具 吸 引力 。 在 网 页 中 插入 图 像 的 

具体 步骤 如 下 。 

四 TP 新 建 一 个 空白 文档 ， 如 图 6-78 所 示 。 

EEJDp 将 光标 放置 在 要 插入 图 像 的 位 置 ， 在 【插入 】 面 板 的 【常用 】 选 项 卡 中 单 击 
【图 像 】 按 钮 天 ， 如 图 6-79 所 示 ， 或 选择 【插入 】 一 【图 像 】 菜 单 命令 。 


EE TEE 
mr 
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图 6-78 ”空白 文档 图 6-79 【常用 】 选 项 卡 
EEC 弹出 【选择 图 像 源 文件 】 对 话 框 ， 从 中 选择 要 插入 的 图 像 文 件 ， 然 后 单 击 【 确 
定 】 按 钮 ， 如 图 6-80 所 示 。 
EEC 这 样 即 可 完成 向 文档 中 插入 图 像 的 操作 ， 如 图 6-81 所 示 。 


售 10 


网 页 设计 与 网 站 建设 


案例 课堂 一 
HE 二 

ed 二 训 ms 
HIKED: os -O90 
ee 
A 2015/12 1024 
可 Zouaenzloas 
Ex a 


hs en ae 7/ 


sam 
30m7 7 BOOY 


6-80 【选择 图 像 源 文件 】 对 话 框 图 6-81 插入 图 像 


EY 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 6-82 所 示 。 
TY 在 插入 图 像 等 对 象 时 ， 有 时 会 弹出 如 图 6-83 所 示 的 对 话 框 。 


ee Bp-c 
EE >] 


ET EV 


夫 洋 六 
把 涪 听 :http1// 


加 时 在 再 和 对 多 时 不 二 失信 此 信息 坦 更 效 镍 且 功 
六 和 法 全 灶 。 


图 6-82 预览 网 页 图 6-83 【图 像 标签 辅助 功能 属性 】 对 话 框 
如 果 不 希 望 弹出 此 对 话 框 ， 可 以 选择 【编辑 】 一 【首选 参数 】 菜 单 命令 ， 打 开 【 首 选 参 
数 】 对 话 框 ， 在 【分 类 】 列 表 框 中 选择 【辅助 功能 】 选 项 ， 然 后 在 【在 插入 时 显示 辅助 功能 
属性 】 选 项 组 中 取消 勾 选 相应 对 象 的 复 选 框 即 可 ， 如 图 6-84 所 示 。 


四 打开 时 全 要点 在 而 板 中 [ID 
国民 大 外 呈 关 (全 有 肝 基 这 了 加 9 其 采 ) 0) 


EL Ca Lum ] 


6-84 【首选 参数 】 对 话 框 


6.3.2 ”案例 12 一 一 设置 图 像 属 性 家 


在 页 面 中 插入 图 像 后 单 击 选 定 图 像 ， 此 时 图 像 的 周围 会 出 现 边 框 ， 表 示 图 像 正 处 于 选中 
状态 ， 如 图 6-85 所 示 。 


交 N' 瑞 号 妆 到 一 一 嘎 避 疗 | 波 否 示人 襄 址 


图 6-85 选中 图 像 


可 以 在 【属性 】 面 板 中 设置 该 图 像 的 属性 ， 如 设置 源 文件 、 输 入 蔡 换 文本 、 设 置 图 片 的 
宽 与 高 等 ， 如 图 6-86 所 示 。 

1) 【地 图 】 文本 框 

用 于 创建 客户 端 图 像 的 热 区 ， 可 以 输入 地 图 的 名 称 ， 如 图 6-87 所 示 。 


属性 = 
Wo 者 而 
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6-86 【属性 】 面板 6-87 图 像 地 图 设置 区 域 


Em 输入 的 名 称 中 只 能 包含 字母 和 数字 ， 并 且 不 能 以 数字 开头 。 


2) 【热点 工具 】 按 钮 WEDDS 

单 击 这 些 按钮 ， 可 以 创建 图 像 的 热 区 链接 。 

3) 【 宽 】 和 【高 】 文 本 杠 

用 于 设置 在 浏览 器 中 显示 图 像 的 宽度 和 高 度 ， 以 像素 为 单位 。 比 如 在 【 宽 】 文 本 框 中 输 
入 宽度 值 ， 页 面 中 的 图 片 即 会 显示 相应 的 宽度 ， 如 图 6-88 所 示 。 
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6-88 设置 图 像 的 宽 与 高 
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案例 课堂 四 一 
ra 【 宽 〗 和 【高 】 的 单位 除 像素 外 ， 还 有 pe( 十 二 点 活字 )、pt( 点 )、in( 英 寸 )、 

NE Imm( 毫 米 )、cm( 厘 米 )、2in+Smnm 的 单位 组 合 等 。 
调整 后 ， 其 文本 框 的 右 侧 将 显示 【 重 设 图 像 大 

小 】 按 钮 [图 ， 单 击 该 按钮 ， 可 恢复 图 像 到 原来 的 | “sa 

大 小 3 = 一 一 
4) 【 源 文件 】 文 本 框 导电 | 
用 于 指定 图 像 的 路 径 。 单 击 文本 框 右 侧 的 【 浏 ee 

览 文件 】 按 钮 回 ， 弹 出 【选择 原始 文件 】 对 话 框 ， 

2 [ER 


可 从 中 选择 图 像 文 件 ， 如 图 6-89 所 示 ， 或 直接 在 
文本 框 中 输入 图 像 路 径 。 


5) 【链接 】 文 本 框 
用 于 指定 图 像 的 链接 文件 。 可 拖 动 【指向 文 图 6-89 【选择 原始 文件 】 对 话 杠 


件 】 图 标 饮 到 【文件 】 面 板 中 的 某 个 文件 上 ， 或 直接 在 文本 框 中 输入 URL 地 址 ， 如 图 6-90 


所 示 。 
6) 【目标 】 下 拉 列 表 框 
用 于 指定 链接 页 面 在 框架 或 窗口 中 的 打开 方式 ， 如 图 6-91 所 示 。 
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6-90 设置 图 像 链接 6-91 设置 图 像 目标 


【 目标】 下 拉 列 表 框 中 有 以 下 几 个 选项 。 
e@  _blank: 在 弹出 的 新 浏览 器 窗口 中 打开 链接 文件 。 
_parent: 如 果 是 嵌 套 的 框架 ， 会 在 父 框 架 或 窗口 中 打开 链接 文件 ， 如 果 不 是 嵌 套 的 
框架 ， 则 与 _top 相同， 在 整个 浏览 器 窗口 中 打开 链接 文件 。 

@ self: 在 当前 网 页 所 在 的 窗口 中 打开 链接 。 此 目标 为 浏览 器 默认 的 设置 。 

e@ top: 在 完整 的 浏览 器 窗口 中 打开 链接 文件 ， 因 而 会 删除 所 有 框架 。 

7) 【原始 】 文 本 框 

用 于 设置 图 像 下 载 完成 前 显示 的 低 质量 图 像 ， 这 里 一 般 指 PNG 图 像 。 单 击 文本 框 右 侧 的 
【浏览 文件 】 按 钮 回 ， 即 可 在 弹出 的 对 话 框 中 选择 低 质量 图 像 ， 如 图 6-92 所 示 。 


8) 【替换 】 文 本 杠 
用 于 设置 图 像 的 说 明 性 文字 ， 以 在 浏览 器 不 显示 图 像 时 进行 蔡 代 显示 ， 如 图 6-93 所 示 。 
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图 6-92 【选择 图 像 源 文件 】 对 话 框 图 6-93 ”设置 图 像 蔡 换文 本 
6.3.3 ”案例 13 一 一 设置 图 像 的 对 齐 方式 人 
图 像 的 对 齐 方式 主要 是 指 图 像 与 同一 行 中 的 文本 或 另 一 个 图 像 等 元 素 的 对 齐 方式 。 对 齐 


第 
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网 
1 
网 
页 
内 
容 
和 
NN 
图 像 的 具体 步 又 如 下 。 NN 
EE 在 文档 窗口 中 选 定 要 对 齐 的 图 像 ， 如 图 6.94 所 示 。 
GEE> 选择 【格式 】 一 【对 齐 】 一 【 左 对 齐 】 菜单 命令 后 ， 效 果 如 图 6.95 所 示 。 \ 
[LT ED Emer ow 


图 信 的 和 方式 主要 是 说 置 图 


俐 与 同 一 全 中 的 本 节 一 个 区 竺 元 的 对 开 广 式 , | 


图 6-94 选择 图 像 图 6-95 图 像 左 对 齐 


EEB 选择 【格式 】 一 【对 齐 】 一 【居中 对 齐 】 菜 单 命令 后 ， 效 果 如 图 6-96 所 示 。 
EC 选择 【格式 】 一 【对 齐 】 一 【 右 对 齐 】 菜 单 命令 后 ， 效 果 如 图 6-97 所 示 。 


.入 从 的 村 并 方 式 主要 是 讼 轩 本 - 到 生 的 让 间 方 式 主要 是 设置 加 
俐 与 月 三 中 的 六 本 三 另 一 个 加 像 办 元 系 的 对 看 方式 - | 重 与 同行 中 的 文本 开胃 一 个 加 信和 元 入 对 开 方 式 - 


图 6-96 图 像 居 中 对 齐 图 6-97 图 像 右 对 齐 
6.3.4 ”案例 14 一 一 插入 鼠标 经 过 图 像 
鼠标 经 过 图 像 是 指 在 浏览 器 中 查看 并 在 鼠标 指针 移 过 它 时 发 生变 化 的 图 像 。 鼠 标 经 过 图 
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网 页 设计 与 网 站 建设 
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像 实际 上 是 由 两 幅 图 像 组 成 ， 即 初始 图 像 (页 面 首次 加 载 时 显示 的 图 像 ) 和 蔡 换 图 像 (鼠标 指针 
经 过 时 显示 的 图 像 )。 
插入 鼠标 经 过 图 像 的 具体 步骤 如 下 。 
ETD 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 鼠标 经 过 图 像 的 位 置 ， 选 择 【 插 入 】 一 
【图 像 对 象 】 一 【鼠标 经 过 图 像 】 菜单 命令 ， 如 图 6-98 所 示 。 


Sn 也 可 以 在 【插入 】 面 板 的 【常用 】〗 选 项 卡 中 单 击 【 图 像 〗 下 拉 按 钮 ， 然 后 从 弹出 
半 ”的 下 拉 列 表 中 选择 【和 鼠标 经 过 图 像 〗 选 项 ， 如 图 6-99 所 示 。 


Dw 
交 愉 站” 演 和 (日 、 喜 看 (V) 插入 (1】 协 改 (M) 检 式 (0) 


a 
刀口 上古 融 | 国 回国。 备 - 司 疗 到 


6-98 ”选择 【鼠标 经 过 图 像 】 菜 单 命令 图 6-99 选择 【鼠标 经 过 图 像 】 选 项 


EC 弹出 【插入 鼠标 经 过 图 像 】 对 话 框 ， 在 【图 像 名 称 】 文 本 框 中 输入 一 个 名 称 (这 

里 保持 默认 名 称 不 变 )， 如 图 6-100 所 示 。 

ES 单 击 【 原 始 图 像 】 文 本 框 右 侧 的 【浏览 】 按 钮 ， 在 弹出 的 【原始 图 像 ， 】 对 话 
框 中 选择 鼠标 经 过 前 的 图 像 文件 ， 设 置 完 成 后 单 击 【确定 】 按 钮 ， 如 图 6-101 所 示 。 
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6-100 【插入 鼠标 经 过 图 像 】 对 话 框 6-101 选择 原始 图 像 


EEC 返回 【插入 鼠标 经 过 图 像 】 对 话 框 ， 在 【原始 图 像 】 文 本 框 中 即 可 看 到 添加 的 
原始 图 像 文 件 路 径 ， 如 图 6-102 所 示 。 

EECRD 单 击 【 和 鼠标 经 过 图 像 】 文 本 框 右 侧 的 【浏览 】 按 钮 ， 在 弹出 的 【鼠标 经 过 图 
像 : 】 对 话 框 中 选择 鼠标 经 过 原始 图 像 时 显示 的 图 像 文件 ， 然 后 单 击 【 确 定 】 按 
钮 ， 返 回 【 插 入 鼠标 经 过 图 像 】 对 话 框 ， 如 图 6-103 所 示 。 

国 于 BY 在 【 蔡 换 文本 】 文 本 框 中 输入 名 称 (这 里 不 再 输入 )， 并 勾 选 【 预 载 鼠 标 经 过 图 
像 】 复 选 框 。 如 果 要 建立 链接 ， 可 以 在 【 按 下 时 ， 前 往 的 URL) 文本 框 中 输入 URL 
地 址 ， 也 可 以 单 击 右 侧 的 【浏览 】 按 钮 ， 选 择 链接 文件 (这 里 不 填 )， 如 图 6-104 
所 示 。 
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图 6-102 添加 的 原始 图 像 文件 路 径 图 6-103 ”选择 鼠标 经 过 图 像 


EEC 单 击 【 确 定 】 按 钮 ， 关 闭 对 话 框 ， 保 存 文 要 ， 按 F12 键 在 浏览 器 中 预览 效果 。 
鼠标 指针 经 过 前 的 图 像 如 图 6-105 所 示 。 


六 NN 珊 号 潭 到 一 一 沼 习 


外 环保 & 健 康 
i Environmental 
甩 入 医学 C11:]/7E| /Tsnr a/ Nininixteator/Donw [ 革 蚁 - 一 一 - 
和 村 斌 过 区 个 TITe:777E[7Uera7NUninistcaEoC7Door CBE] 
团 册 数 最 评 底 过 医 像 
ZE 
mF UR EW 


6-104 【插入 鼠标 经 过 图 像 】 对 话 框 6-105 ”鼠标 经 过 前 的 图 像 
鼠标 指针 经 过 后 的 图 像 如 图 6-106 所 示 。 


图 6-106 鼠标 经 过 后 的 图 像 
6.3.5 ”案例 15 一 一 插入 图 像 占 位 符 


在 布局 页 面 时 ， 有 的 时 候 可 能 需要 插入 的 图 像 还 没有 制作 好 。 为 了 整体 页 面 效果 的 统 
一 ， 此 时 可 以 使 用 图 像 占 位 符 来 蔡 代 图 片 的 位 置 ， 待 网 页 布局 好 后 ， 再 用 Fireworks 创建 图 片 。 
插入 图 像 占 位 符 的 操作 步骤 如 下 。 
EC 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 图 像 占 位 符 的 位 置 。 选 择 【 插 入 】 一 
【图 像 对 象 】 一 【图 像 占 位 符 】 菜 单 命令 ， 如 图 6-107 所 示 。 
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网 页 设计 与 网 站 建设 
-一 案例 课堂 9 一 


EDITD) 弹出 【图 像 占 位 符 】 对 话 框 ， 如 图 6-108 所 示 。 
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图 6-107 选择 【图 像 占 位 符 】 菜 单 命令 图 6-108 【图 像 占 位 符 】 对 话 框 


EEJes 在 【名 称 】 文 本 框 中 输入 图 片 名 称 “Banner”， 在 【宽度 】 和 【高 度 】 文 本 框 
中 输入 图 片 的 宽度 和 高 度 (这 里 输入 550 和 80)， 在 颜色 选择 器 中 选择 图 像 占 位 符 的 
颜色 #0099FF， 在 【 蔡 换文 本 】 文 本 框 中 输入 替换 图 片 的 文字 “Banner 位 置 ”， 如 
图 6-109 所 示 。 

EERZ 单 击 【确定 】 按 钮 ， 即 可 插入 图 像 占 位 符 ， 如 图 6-110 所 示 。 
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图 6-109 【图 像 占 位 符 】 对 话 框 图 6-110 插入 的 图 像 占 位 符 


mt 【图 像 占 位 符 〗 对 话 框 的 【名 称 】 文 本 框 中 的 名 称 只 能 包含 小 写 ASCII 字母 和 数 
慌 。 字 ， 且 不 能 以 数字 开头 。 


6.4 用 动画 美化 网 页 


在 网 页 中 插入 动画 是 美化 网 页 的 一 种 方法 ， 常 见 的 网 页 动画 有 Flash 动画 、FLV 视 


6.4.1 案例 16 一 一 插入 Flash 动画 


Flash 动画 与 Shockwave 电影 相 比 ， 其 优势 是 文件 小 且 网 上 传输 速度 快 。 在 网 页 中 插入 
Flash 动画 的 操作 步骤 如 下 。 
EEJDp 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 Flash 动画 的 位 置 ， 选 择 【 插 入 】 一 【 媒 
体 】 一 SWF 菜单 命令 ， 如 图 6-111 所 示 。 
ED 弹出 【打开 】 对 话 框 ， 从 中 选择 相应 的 Flash 文件 ， 如 图 6-112 所 示 。 
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图 6-111 选择 SWF 菜单 命令 图 6-112 选择 Flash 文件 

区 TB 单 击 【确定 】 按 钮 插入 Flash 动画 ， 然 后 调整 Flash 动画 的 大 小 ， 使 其 适合 网 
页 ， 如 图 6-113 所 示 。 

ES 保存 文 当 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 6-114 所 示 。 
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6-113 ”调整 Flash 的 大 小 
6.4.2 ”案例 17 一 一 插入 FLV 视频 


用 户 可 以 向 网 页 中 轻松 地 添加 FLV 视频 ， 而 无 须 使 用 Flash 创作 工具 。 在 开始 操作 之 
前 ， 必 须 有 一 个 经 过 编码 的 FLV 文件 。 
ED 新 建 一 个 空白 文档 ， 将 光标 置 于 要 插入 Flash 动画 的 位 置 ， 选 择 【 插 入 】 一 【 媒 


6-114 ”预览 网 页 动画 
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体 】 一 FLV 菜单 命令 ， 如 图 6-115 所 示 。 
EEJPp 弹出 【插入 FLV】 对 话 框 ， 从 【视频 类 型 】 下 拉 列 表 框 中 选择 视频 类 型 ， 这 里 
选择 【累进 式 下 载 视频 】 选 项 ， 如 图 6-116 所 示 。 
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6-115 ”选择 FLV 菜单 命令 6-116 【插入 FLV】 对 话 框 


Sn “累进 式 下 载 视频 ”是 将 FLV 文件 下 载 到 站 点 访问 者 的 硬盘 上 ， 然 后 播放 。 但 

站 是 ， 与 传统 的 “下 载 并 播放 ”视频 传送 方法 不 同 ， 累 进 式 下 载 允 许 在 下 载 完成 之 前 就 
开始 播放 视频 文件 。 也 可 以 选择 【 流 视频 】〗 选 项 ， 选 择 此 选项 后 下 方 的 选项 区 域 也 会 
随 之 发 生变 化 ， 接 着 可 以 进行 相应 的 设置 ， 如 图 6-117 所 示 。 

Em “ 流 视频 ”对 视频 内 容 进行 流 式 处 理 ， 并 在 一 段 可 确保 流畅 播放 的 很 短 的 缓冲 时 

刁 间 后 在 网 页 上 播放 该 内 容 。 


EC) 单 击 URL 文本 框 右 侧 的 【浏览 】 按 钮 ， 即 可 在 弹出 的 【打开 】 对 话 框 中 选择 要 
插入 的 FLV 文件 ， 如 图 6-118 所 示 。 


6-117 ”选择 【 流 视频 】 选 项 图 6-118 【打开 】 对 话 框 


EGRZ 返回 【插入 FLV】 对 话 框 ， 在 【外 观 】 下 拉 列 表 框 中 选择 显示 出 来 的 播放 器 外 
观 ， 如 图 6-119 所 示 。 

ED 接着 设置 【宽度 】 和 【高 度 】， 并 勾 选 【限制 高 宽 比 】”、【 自 动 播放 】 和 【 自 
动 重新 播放 】3 个 复 选 框 ， 完 成 后 单 击 【 确 定 】 按 钮 ， 如 图 6-120 所 示 。 
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图 6-119 选择 外 观 6-120 ”设置 高 度 、 宽 度 等 参数 
yr 【包括 外 观 〗 是 FLV 文件 的 宽度 和 高 度 与 所 选 外 观 的 宽度 和 高 度 相 加 得 出 的 和 。 


本 提示 


ED 单 击 【确定 】 按 钮 关闭 对 话 框 ， 即 可 将 FLV 文件 添加 到 网 页 上 ， 如 图 6-121 
所 示 。 
ED 保存 页 面 后 按 F12 键 ， 即 可 在 浏览 器 中 预览 效果 ， 如 图 6-122 所 示 。 
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6-121 在 网 页 中 插入 FLV 6-122 ”预览 网 页 


6.5 用 其 他 网 页 元 素 美化 网 页 


除了 使 用 文字 、 图 像 、 动 画 来 美化 网 页 外 ， 用 户 还 可 以 在 网 页 中 插入 其 他 元 素来 美化 网 
页 ， 如 水 平 线 、 日 期 、 特 殊 字 符 等 。 


6.5.1 案例 18 一 一 插入 水 平 线 


网 页 文档 中 的 水 平 线 主要 用 于 分 隔 文档 内 容 ， 使 文档 结构 清晰 明了 ， 便 于 浏览 。 在 文档 
中 插入 水 平 线 的 具体 步骤 如 下 。 
EEC 在 Dreamweaver CS6 的 编辑 窗 格 中 ， 将 光标 置 于 要 插入 水 平 线 的 位 置 ， 选 择 
【插入 】 一 HTML 一 【水 平 线 】 菜 单 命令 ， 如 图 6-123 所 示 。 
ET 这 样 即 可 在 文档 窗口 中 插入 一 条 水 平 线 ， 如 图 6-124 所 示 。 
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CEE TT -Ox 


mo) 


HE 中 

村民 对 闽 (O) 人 

A 全 文章 对 间 D9 

dctw nz) 

全 WHYpIO : 本 [OS sm -| 和 i 国 罚 Sux3%v i171 Weicwl | 
6-123 ”选择 【水 平 线 】 菜 单 命令 6-124 ”插入 的 水 平 线 


莉 于 BY 在 【属性 】 面 板 中 ， 将 【 宽 】 设 置 为 710，【 高 】 设 置 为 5s， 【对齐 】 设 置 为 
ee ， 并 勾 选 【阴影 】 复 选 枉 ， 如 图 6-125 所 示 。 


ze | 钨 素 对 齐 多 县 认 了 类 人 无 - 
忆 阴 影 G) 


图 6-125 【属性 】 面 板 
EC) 保存 页 面 后 按 F12 键 ， 即 可 预览 插入 的 水 平 线 效果 ， 如 图 6-126 所 示 。 


6-126 ”预览 网 页 
6.5.2 ”案例 19 一 一 插入 日 期 


上 网 时 ， 经 常会 看 到 有 的 网 页 上 显示 有 日 期 。 向 网 页 中 插入 系统 当前 日 期 的 具体 步骤 
如 下 。 
ES 在 文档 窗口 中 ， 将 插入 点 放 到 要 插入 日 期 的 位 置 ， 选 择 【 插 入 】 一 【日 期 】 菜 
单 命令 ， 如 图 6-127 所 示 。 
ED) 或 单 击 【 插 入 】 面 板 下 【常用 】 选 项 卡 中 的 【日 期 】 按钮 图 |， 如 图 6-128 所 示 。 
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图 6-127 选择 【日 期 】 菜 单 命令 图 6-128 单 击 【 日 期 】 按 钮 

ECDIS 弹出 【插入 日 期 】 对 话 框 ， 从 中 分 别 设置 【星期 格式 】、【 日 期 格式 】 和 【时 
间 格 式 】， 并 勾 选 【储存 时 自动 更 新 】 复 选 框 ， 如 图 6-129 所 示 。 

EEC》 单 击 【 确 定 】 按 钮 ， 即 可 将 日 期 插入 到 当前 文档 中 ， 如 图 6-130 所 示 。 


RECTTCERTCRITCTCTTO 


2015 年 13 日 星期 一 1014 AM 


园 依存 时 自 劝 更 新 


图 6-129 【插入 日 期 】 对 话 框 图 6-130 插入 的 日 期 
6.5.3 ”案例 20 一 一 插入 特殊 字符 


在 Dreamweaver CS6 中 ， 有 时 需要 插入 一 些 特殊 字符 ， 如 版 权 符号 和 注册 商标 符号 等 。 
插入 特殊 字符 的 具体 步骤 如 下 。 
EC 将 光标 放 到 文档 中 需要 插入 特殊 字符 (这 里 输入 版 权 符 号 ) 的 位 置 ， 如 图 6-131 
所 示 。 
EEC) 选择 【插入 】 一 HTML 一 【特殊 字符 】 一 【版 权 】 菜 单 命令 ， 即 可 插入 版 权 符 
号 ， 如 图 6-132 所 示 。 
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图 6-131 定位 插入 特殊 符号 的 位 置 图 6-132 ”插入 的 特殊 符号 
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ES 如 果 在 【特殊 字符 】 子 菜单 中 没有 需要 的 字符 ， 可 以 选择 【插入 】 一 HTML 一 【 特 
殊 字符 】 一 【其 他 字符 】 菜 单 命令 ,打开 【插入 其 他 字符 】 对 话 框 ， 如 图 6-133 所 示 。 

EEC 单 击 需要 的 字符 ， 该 字符 就 会 出 现在 【插入 】 文 本 框 中 ， 也 可 以 直接 在 该 文本 

框 中 输入 字符 ， 如 图 6-134 所 示 。 
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图 6-133 【插入 其 他 字符 】 对 话 框 图 6-134 选择 要 插入 的 字符 
EEID 单 击 【确定 】 按 钮 ， 即 可 将 该 字符 插入 到 文档 中 ， 如 图 6-135 所 示 。 


6-134 ”插入 特殊 字符 


6.6 ”综合 演练 一 一 制作 图 文 并 茂 的 网 页 


本 实例 讲述 如 何在 网 页 中 插入 文本 和 图 像 ， 并 对 网 页 中 的 文本 和 图 像 进行 相应 的 排版 ， 


以 形成 图 文 并 茂 的 网 页 。 
具体 的 操作 步骤 如 下 。 
ECESDp 打开 随 书 附带 光盘 中 的 “ch06\ 制 作 图 文 并 茂 的 网 页 index.htm” 文 件 ， 如 图 6-136 
所 示 。 


ECEDUP9 将 光标 放置 在 要 输入 文本 的 位 置 ， 然 后 输入 文本 ， 如 图 6-137 所 示 。 
ES 将 光标 放置 在 文本 的 适当 位 置 ， 选 择 【插入 】 一 【图 像 】 菜 单 命令 ， 弹 出 【 选 
择 图 像 源 文件 】 对 话 框 ， 从 中 选择 图 像 文件 ， 如 图 6-138 所 示 。 
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6-136 ”打开 素材 文件 6-137 输入 文本 


ED 单 击 【 确 定 】 按 钮 ， 插 入 图 像 ， 如 图 6-139 所 示 。 
葬 于 BY 选择 【窗口 】 一 【属性 】 菜 单 命令 ,打开 【属性 】 面 板 ， 在 【属性 】 面 板 的 
【替换 】 文 本 框 中 输入 “欢迎 您 的 光临 ! ”， 如 图 6-140 所 示 。 
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图 6-138 【选择 图 像 源 文件 】 对 话 框 6-139 ”插入 图 像 


图 像 ，30K 源 文件 6) issgez/003 jpe 。 命 口 普 换 G) 欢 凶 人 83 入! -  。 寓 胃 
om 镑 接 0) # 昌 口 纺 也 及 对 区 0 4 高 0 
地 图 o 目标 号) - 
RJ] DOVY 原始 SD 


图 6-140 输入 替换 文字 


ES 选 定 所 输入 的 文字 ， 在 【属性 】 面 板 中 设置 【字体 】 为 【宋体 】，【 大 小 】 为 
12， 并 在 中 文 输入 法 的 全 角 状 态 下 ， 设 置 每 个 段落 的 段 首 空 两 个 汉字 的 空格 ， 如 

图 6-141 所 示 。 

ED 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 6-142 所 示 。 
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ps 目标 规则 新 css 规则 > 中 这 记 m 床 此 
[Es] [| | 
CERE 
图 6-141 设置 字体 大 小 图 6-142 ”预览 效果 


6.7” 跟 我 练 练 手 


6.7.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 


6.7.2 上 机 练习 


练习 1: 文档 的 基本 操作 。 
练习 2: 用 文字 美化 网 页 。 
练习 3: 用 图 像 美化 网 页 。 
练习 4: 用 动画 美化 网 页 。 
练习 5: 用 其 他 网 页 元 素 美化 网 页 。 


6.8 高 手 甜 点 


甜点 1: 如 何 查看 FLV 文件 


若 要 查看 FLV 文件 ， 用 户 的 计算 机 上 必须 安装 Flash Player 8 或 更 高 版 本 。 如 果 没 有 安装 
所 需 的 Flash Player 版 本 ， 但 安装 了 Flash Player 6.0、6.5 或 更 高 版 本 ， 则 浏览 器 将 显示 Flash 
了 layer 快速 安装 程序 ， 而 非 蔡 代 内 容 。 如 果 用 户 拒绝 快速 安装 ， 那 么 页 面 就 会 显示 替代 内 容 。 


甜点 2: 如 何 正 常 显示 插入 的 ActiveX 控件 
使 用 Dreamweaver 在 网 页 中 插入 ActiveX 控件 后 ， 如 果 浏 览 器 不 能 正常 地 显示 ActiveX 


控件 ， 则 可 能 是 因 


为 浏览 器 禁用 了 ActiveX 所 致 ， 此 时 可 以 通过 下 面 的 方法 启用 ActiveX。 


EEIDp 打开 IE 浏览 器 窗口 ， 切 换 到 【工具 】 一 【Itemet 选项 】 菜 单 命令 ， 打 开 
【Intemet 选项 】 对 话 框 ， 选 择 【 安 全 】 选 项 卡 ， 单 击 【 自 定义 级 别 】 按 钮 ， 如 图 6-143 


所 示 。 


ECESUPp 打开 【安全 设置 】 对 话 框 ， 在 【设置 】 列 表 框 中 启用 有 关 的 ActiveX 选项 ， 然 
后 单 击 【确定 】 按 钮 即 可 ， 如 图 6-144 所 示 。 
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图 6-143 【Internet 选项 】 对 话 框 图 6-144 【安全 设置 】 对 话 框 
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网 页 相互 跳 转 的 依据 。 网 页 中 常用 的 链 
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何 创建 网 站 链接 。 
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链接 是 网 页 中 比较 重要 的 部 分 ， 是 各 个 
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7.1 链接 与 路 径 


链接 是 网 页 中 极为 重要 的 部 分 ， 单 击 文档 中 的 链接 ， 即 可 跳 转 至 相应 位 置 。 正 是 有 了 
链接 ， 人 们 才 可 以 在 网 站 中 相互 跳 转 而 方便 地 查阅 各 种 各 样 的 知识 ， 享 受 网 络 带 来 的 无 穷 
乐趣 。 


7.1.1 链接 的 概念 


链接 也 叫 超级 链接 。 超 级 链接 根据 链接 源 端 点 的 不 同 ， 分 为 超 文本 和 超 链接 两 种 。 超 文 
本 就 是 利用 文本 创建 的 超级 链接 。 在 浏览 器 中 ， 超 文本 一 般 显 示 为 下 方 带 蓝 色 下 划 线 的 文 
字 。 超 链接 是 利用 除了 文本 之 外 的 其 他 对 象 所 构建 的 链接 ， 如 图 7-1 所 示 。 

通俗 地 讲 ， 链 接 由 两 个 端点 (也 称 锚 ) 和 一 个 方向 构成 ， 通 常 将 开始 位 置 的 端点 称 为 源 端点 
(或 源 锚 )， 而 将 目标 位 置 的 端点 称 为 目标 端点 (或 目标 锚 )， 链 接 就 是 由 源 端点 到 目标 端点 的 一 
种 跳 转 。 目 标 端点 可 以 是 任意 的 网 络 资源 。 例 如 ， 它 可 以 是 一 个 页 面 、 一 幅 图 像 、 一 段 声 
音 、 一 段 程序 ， 甚 至 可 以 是 页 面 中 的 某 个 位 置 。 

利用 链接 可 以 实现 在 文档 间或 文档 中 的 跳 转 。 可 以 说 ， 浏 览 网 页 就 是 从 一 个 文档 跳 转 到 
另 一 个 文档 ， 从 一 个 位 置 跳 转 到 另 一 个 位 置 ， 从 一 个 网 站 跳 转 到 另 一 个 网 站 的 过 程 ， 而 这 些 
过 程 都 是 通过 链接 来 实现 的 ， 如 图 7-2 所 示 。 
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图 7-1 网 页 中 的 链接 图 7-2 通过 链接 进行 跳 转 
7.1.2 ”链接 路 径 


一 般 来 说 ，Dreamweaver 允许 使 用 的 链接 路 径 有 3 种 : 绝对 路 径 、 文 档 相 对 路 径 和 根 相 
对 路 径 。 
1. 绝对 路 径 


如 果 在 链接 中 使 用 完整 的 URL 地 址 ， 这 种 链接 路 径 就 称 为 绝对 路 径 。 绝 对 路 径 的 特点 
是 : 路 径 同 链接 的 源 端 点 无 关 。 


全 1 


例如 ， 要 创建 “我 的 站 点 ”文件 夹 中 的 index.html 文档 的 链接 ， 则 可 使 用 绝对 路 径 “D:\ 
我 的 站 点 \index.html”， 如 图 7-3 所 示 。 


Sn 采用 绝对 路 径 有 两 个 缺点 : 一 是 不 利于 测试 ; 二 是 不 利于 移动 站 点 。 


2. 文档 相对 路 径 

文档 相对 路 径 是 指 以 当前 文档 所 在 的 位 置 为 起 点 到 被 链接 文档 经 由 的 路 径 。 文 档 相 对 路 
径 可 以 表述 源 端 点 同 目标 端点 之 间 的 相互 位 置 ， 它 同 源 端点 的 位 置 密切 相关 。 

使 用 文档 相对 路 径 有 以 下 3 种 情况 。 

(1) 如 果 链 接 中 源 端点 和 目标 端点 在 同一 目录 下 ， 那 么 在 链接 路 径 中 只 需要 提供 目标 端点 
的 文件 名 即 可 ， 如 图 7-4 所 示 。 
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图 7-3 绝对 路 径 图 7-4 相对 路 径 


(2) 如 果 链 接 中 源 端点 和 目标 端点 不 在 同一 目录 下 ， 则 需要 提供 目录 名 、 前 斜 杠 和 文件 
名 ， 如 图 7-5 所 示 。 

(3) 如 果 链 接 指 向 的 文档 没有 位 于 当前 目录 的 子 级 目录 中 ， 则 可 利用 “../” 符 号 来 表示 当 
前 位 置 的 上 级 目录 ， 如 图 7-6 所 示 。 


文本 : 镜 接 
证 接 : 我 的 站 点 \index. henl = 折 
日 标 : blk 四 


本 是: 


访 同 刍 : 
Tab 刍 需 引 


图 7-5 相对 路 径 图 7-6 相对 路 径 

采用 相对 路 径 的 特点 是 : 只 要 站 点 的 结构 和 文档 的 位 置 不 变 ， 那 么 链接 就 不 会 出 错 ; 否 
则 ， 链 接 就 会 失效 。 在 把 当前 文档 与 处 在 同一 文件 夹 中 的 另 一 文档 链接 ， 或 把 同一 网 站 下 不 
同文 件 夹 中 的 文档 相互 链接 时 ， 就 可 以 使 用 相对 路 径 。 

3. 根 相 对 路 径 

可 以 将 根 相 对 路 径 看 作 是 绝对 路 径 和 相对 路 径 之 间 的 一 种 折 中 ， 是 指 从 站 点 根 文件 夹 到 
被 链接 文档 经 由 的 路 径 。 在 这 种 路 径 表 达 式 中 ， 所 有 的 路 径 都 是 从 站 点 的 根 目录 开始 的 ， 同 
源 端点 的 位 置 无 关 ， 通 常用 一 个 斜 线 “/” 来 表示 根 目录 。 
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人 根 相对 路 径 同 绝对 路 径 非 常 相似 ， 只 是 它 省 去 了 绝对 路 径 中 带 有 协议 地 址 的 


A 部 分 . 


7.1.3 ”链接 的 类 型 


根据 链接 的 范围 ， 链 接 可 分 为 内 部 链接 和 外 部 链接 两 种 。 内 部 链接 是 指 同 一 个 文档 之 间 
的 链接 ， 外 部 链接 是 指 不 同 网 站 文档 之 间 的 链接 。 

根据 建立 链接 的 不 同 对 象 ， 链 接 又 可 分 为 文本 链接 和 图 像 链接 两 种 。 浏 览 网 页 时 ， 会 看 
到 一 些 带 下 划 线 的 文字 ， 将 鼠标 移 到 文字 上 时 ， 鼠 标 指针 将 变 成 手 形 ， 单 击 鼠 标 会 打开 一 个 
网 页 ， 这 样 的 链接 就 是 文本 链接 ， 如 图 7-7 所 示 。 

在 网 页 中 浏览 内 容 时 ， 若 将 鼠标 移 到 图 像 上 ， 鼠 标 指针 变 成 手 形 ， 则 单 击 鼠 标 就 会 打开 
一 个 网 页 ， 这 样 的 链接 就 是 图 像 链 接 ， 如 图 7-8 所 示 。 
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图 7-7 文本 链接 图 7-8 图 像 链接 


7.2 添加 网 页 超 链 接 
Intemet 之 所 以 越 来 越 受 欢迎 ， 很 大 程度 上 是 因为 在 网 页 中 使 用 了 链接 。 


7.2.1 案例 1 一 一 添加 文本 链接 


通过 Dreamweaver， 可 以 使 用 多 种 方法 来 创建 内 部 链接 。 使 用 【属性 】 面 板 创建 网 站 内 
文本 链接 的 具体 步骤 如 下 。 
EC) 启动 Dreamweaver CS6， 打 开 随 书 光盘 中 的 “ch07index.htm” 文 件 ， 选 定 “ 公 
司 简介 ”这 几 个 字 ， 将 其 作为 建立 链接 的 文本 ， 如 图 7-9 所 示 。 
EGRD9 单 击 【 属 性 】 面 板 中 的 【浏览 文件 】 按 钮 口 ， 弹 出 【选择 文件 】 对 话 框 ， 选 择 
网 页 文件 “公司 简介 .html”， 单 击 【 确 定 】 按 钮 ， 如 图 7-10 所 示 。 


5 本 在 【属性 】 面 板 中 直接 输入 链接 地 址 也 可 以 创建 链接 。 选 定 文本 后 ， 选 择 【〖 窗 
并 口 一 【属性 】 菜 单 命令 ， 打开 【属性 】 面 板 ， 然 后 在 【链接 】 文 本 框 中 直接 输入 链 
接 文 件 名 “公司 简介 .html” 即 可 。 
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EDDp 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 7-11 所 示 。 
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7-9 选 定 文本 7-10 【选择 文件 】 对 话 框 


7-11 ”预览 网 页 


7.2.2 ”案例 2 一 一 添加 图 像 链 接 


使 用 【属性 】 面 板 创建 图 像 链接 的 具体 步骤 如 下 。 

ETD 打开 随 书 光盘 中 的 “cho7index html” 文 件 ， 选 定 要 创建 链接 的 图 像 ， 然 后 单 击 
【属性 】 面 板 中 的 【浏览 文件 】 按 钮 铝 ， 如 图 7-12 所 示 。 

ET 弹出 【选择 文件 】 对 话 框 ， 浏 览 并 选择 一 个 文件 ， 在 【相对 于 】 下 拉 列 表 框 中 
选择 【文档 】 选 项 ， 然 后 单 击 【确定 】 按 钮 ， 如 图 7-13 所 示 。 


7-12 选 定 图 像 7-13 【选择 文件 】 对 话 框 
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A 


让 固 仿 ， 号 。 源 文件 GS) inejlu23. jpe | 全 已 若 病 0 设备 的 使 用 视频 。 ~ 
[3 a 


区 TB》 在 【属性 】 面 板 的 【目标 】 下 拉 列 表 框 中 ， 选 择 链接 文档 打开 的 方式 ， 然 后 在 
【 营 换 】 文 本 框 中 输入 图 像 的 替换 文本 “设备 的 使 用 视频 ” 


提示 与 文本 链接 一 样 ， 也 可 以 通过 直接 输入 链接 地 址 的 方法 来 创建 图 像 链接 。 


， 如 图 7-14 所 示 。 
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NN 图 7-14 【属性 】 面板 
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7.2.3 ”案例 3 一 一 创建 外 部 链接 


创建 外 部 链接 是 指 将 网 页 中 的 文字 或 图 像 与 站 点 外 的 文档 相连 ， 也 可 以 是 Internet 上 的 


网 站 。 


Sn 创建 外 部 链接 (从 一 个 网 站 的 网 页 链接 到 另 一 个 网 站 的 网 页 ) 时 ， 必 须 使 用 绝对 路 
半径 ， 即 被 链接 文档 的 完整 URL， 包 括 所 使 用 的 传输 协议 (对 于 网 页 通常 是 http://)。 


例如 ， 在 主页 上 添加 网 易 、 搜 狐 等 网 站 的 图 标 ， 将 它们 与 相应 的 网 站 链接 起 来 。 

ES 打开 随 书 光盘 中 的 “ch07\index.html” 文 件 ， 选 定 百度 网 站 图 标 ， 在 【属性 】 面 
板 的 【链接 】 文 本 框 中 输入 百度 网 址 “http:/www.baidu.com”， 如 图 7-15 所 示 。 

ED 保存 网 页 后 按 F12 键 ， 在 浏览 器 中 将 网 页 打开 。 单 击 创建 的 图 像 链 接 ， 即 可 打 


开 百 度 网 站 首页 ， 如 图 7-16 所 示 。 
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图 7-15 【属性 】 面板 图 7-16 预览 网 页 


7.2.4 案例 4 一 一 创建 锚 记 链接 


创建 命名 错 记 (简称 错 点 ) 就 是 在 文档 的 指定 位 置 设置 标记 ， 给 该 标记 一 个 名 称 以 便 引 用 。 


通过 创建 锚 点 ， 可 以 使 链接 指向 当前 文档 或 不 同文 档 中 的 指定 位 置 。 


ET 打开 随 书 光 盘 中 的 “ch07\ 创 建 错 链 接 \index html” 文件。 将 光标 放置 到 要 命名 锚 
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记 的 位 置 ， 或 选中 要 为 其 命名 锚 记 的 文本 ， 如 图 7-17 所 示 。 
EC 在 【插入 】 面 板 的 【常用 】 选 项 卡 中 ， 单 击 【命名 错 记 】 按 钮 最 ， 如 图 7-18 
所 示 。 


Sn 也 可 以 选择 【〖 插 入】 一 【命名 锚 记 】 菜 单 命令 或 按 CtrlL+AlttrA 组 合 键 。 


EEIe 在 弹出 的 【命名 锚 记 】 对 话 框 中 输入 【 锚 记 名 称 】 为 Top， 然 后 单 击 【确定 】 按 
钮 ， 如 图 7-19 所 示 。 


洪 蘑 古 当 到 半 洲 一 一 吉 康 了 革 沼 到 队 半 几 7 小 


。 及 二 看 局 | 要 童 并 浊 | Spry | jQuery Mobile | 
“上 & 口 | 唱 田 | 加 日 国 - 处 * 参 
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7-17 ”定位 命名 锚 记 的 位 置 7-18 单 击 【 命 名 锚 记 】 按 钮 
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条 记 名 旦 : Top 


7-19 【命名 锚 记 】 对 话 框 图 7-20 添加 命名 锚 记 


在 一 篇 文档 中 ， 锚 记名 称 是 唯一 的 ， 不 允许 在 同一 篇 文档 中 出 现 相同 的 锚 记 名 
称 。 锚 记名 称 中 不 能 含有 空格 ， 而 且 不 应 置 于 层 内 。 锚 记名 称 区 分 大 小 写 。 


在 文档 中 定义 了 锚 记 后 ， 只 做 好 了 链接 的 一 半 任 务 ， 要 链接 到 文档 中 锚 记 所 在 的 位 置 ， 
还 必须 创建 锚 记 链接 。 
具体 操作 步骤 如 下 。 
ECEDRD9 在 文档 的 底部 输入 文本 “返回 顶部 ”并 将 其 选 定 ， 作 为 链接 的 文字 ， 如 图 7-21 
所 示 。 
EC 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 一 个 字符 符号 # 和 锚 记 名 称 。 例 如 ， 要 
链接 到 当前 文档 中 名 为 Top 的 锚 记 ， 则 输入 #Top， 如 图 7-22 所 示 。 
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图 7-21 选 定 链接 的 文字 


《》 MTIL| 。 格式) [段落 四 大 ie。 "BJ 尘 注 二 起 标 题 D) 
了 cs DD) 无 ~ 幸 挤 中 op 7 人 局 上 国名 


列表 硕 目 


7-22 【属性 】 面 板 


nm 车 要 链接 到 同一 文件 天内 其 他 文档 (如 main html) 中 名 为 top 的 锚 记 ， 则 应 输入 
半 mainhtmlftop。 同 样 ， 也 可 以 使 用 【〖 属 性】 面板 中 的 【指向 文件 】 图 标 来 创建 锚 记 链 
接 。 单 击 【 必 性】 面板 中 的 【指向 文件 】 图 标 ， 然 后 将 其 拖 至 要 链接 到 的 锚 记 (可 以 
是 同一 文档 中 的 锚 记 ， 也 可 以 是 其 他 打开 文档 中 的 锚 记 ) 上 即 可 。 
ECDIS 保存 文档 ， 按 F12 键 在 浏览 器 中 将 网 页 打开 ， 然 后 单 击 网 页 底部 的 “返回 项 
部 ”4 个 字 ， 如 图 7-23 所 示 。 
EC 在 浏览 器 的 网 页 中 ， 正 文 的 第 1 行 就 会 出 现在 页 面 项 部 ， 如 图 7-24 所 示 。 
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图 7-23 预览 网 页 图 7-24 返回 页 面 顶部 
7.2.5 “案例 5 一 一 创建 图 像 热 点 链接 


在 网 页 中 ， 不 但 可 以 单 击 整 幅 图 像 跳 转 到 链接 文档 ， 也 可 以 单 击 图 像 中 的 不 同 区 域 而 跳 
转 到 不 同 的 链接 文档 。 通 常 将 处 于 一 幅 图 像 上 的 多 个 链接 区 域 称 为 热点 。 热 点 工具 有 3 种 : 
和 矩形 热点 工具 、 椭 圆 形 热点 工具 和 多 边 形 热点 工具 。 

下 面 用 一 个 实例 介绍 创建 图 像 热 点 链接 的 方法 。 

EC 打开 随 书 光 盘 中 的 “ch07index.html” 文 件 ， 选 中 其 中 的 图 像 ， 如 图 7-25 所 示 。 
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ESUP9 单 击 【属性 】 面 板 中 相应 的 热点 工具 ， 这 里 选择 矩形 热点 工具 口 ， 然 后 在 图 像 
上 需要 创建 热点 的 位 置 拖 动 鼠标 ， 创 建 热点 ， 如 图 7-26 所 示 。 
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图 7-25 选 定 图 像 图 7-26 绘制 图 像 热点 
Euep 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 链接 的 文件 ， 即 可 创建 一 个 图 像 热点 
链接 ， 如 图 7-27 所 示 。 


EC 再 用 步骤 step01 一 step03 的 方法 创建 其 他 热点 链接 ， 单 击 【属性 】 面 板 中 的 指针 
热点 工具 号 ， 将 鼠标 指针 恢复 为 标准 箭头 状态 ， 在 图 像 上 选取 热点 。 
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7-27 ”创建 图 像 热点 链接 


em 被 选中 的 热点 边框 上 会 出 现 控 点 ， 拖 动 控 点 可 以 改变 热点 的 形状 。 选 中 热点 后 ， 
半 。 按 Delete 键 可 以 删除 热点 。 也 可 以 在 【属性 】〗 面 板 中 设置 热点 相对 应 的 URL 链接 
地 址 。 


7.2.6 ”案例 6 一 一 创建 电子 邮件 链接 


电子 邮件 链接 是 一 种 特殊 的 链接 ， 单 击 这 种 链接 ， 会 启动 计算 机 中 相应 的 E-mail 程序 ， 
允许 书写 电子 邮件 ， 然 后 发 往 链接 中 指定 的 邮箱 地 址 。 
EC 打开 需要 创建 电子 邮件 链接 的 文档 。 将 光标 置 于 文档 窗口 中 要 显示 电子 邮件 链 
接 的 地 方 ， 选 定 即 将 显示 为 电子 邮件 链接 的 文本 或 图 像 ， 然 后 选择 【插入 】 一 【 电 
子 邮件 链接 】 菜 单 命令 ， 如 图 7-28 所 示 。 


an 也 可 以 在 【插入 了】 面板 的 【常用 】 选 项 卡 中 单 击 【电子 邮件 链接 了】 按钮 ， 如 图 7-29 
所 示 。 


EEC 在 弹出 的 【电子 邮件 链接 】 对 话 框 的 【文本 】 文 本 框 中 ， 输 入 或 编辑 作为 电子 
邮件 链接 显示 在 文档 中 的 文本 ， 在 【电子 邮件 】 文 本 框 中 输入 邮件 送 达 的 E-mail 地 
址 ， 然 后 单 击 【确定 】 按 钮 ， 如 图 7-30 所 示 。 
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7-28 ”选择 【电子 邮件 链接 】 菜 单 命令 7-29 单 击 【电子 邮件 链接 】 按 钮 


Dr 同样 ， 也 可 以 利用 【属性 】 面 板 创建 电子 邮件 链接 。 选 定 即将 显示 为 电子 邮件 链接 
汇 。 的 文本 或 图 像 ， 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 mailto:liule2012@163.com， 如 
图 7-31 所 示 。 


文 记 ”联系 我 们 
电子 岂 件 :1iule2012@163. cem 


7-30 【电子 邮件 链接 】 对 话 框 7-31 【属性 】 面板 


5 电子 邮件 地 址 的 格式 为 : 用 户 名 @ 主 机 名 (服务 器 提供 商 )。 在 【属性 】 面 板 的 【 链 


SN 接 】 文 本 框 中 ，mailto: 与 电子 邮件 地 址 之 间 不 能 有 空格 (如 mailto:liule2012@163.com)。 


ETEY 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 可 以 看 到 电子 邮件 链接 的 效果 ， 如 图 7-32 
所 示 。 


图 7-32 预览 效果 
7.2.7 ”案例 7 一 一 创建 文件 下 载 链接 


文件 下 载 链接 在 软件 下 载 网 站 或 源 代码 下 载 网 站 中 应 用 得 较 多 。 其 创建 的 方法 与 一 般 的 
链接 的 创建 方法 相同 ， 只 是 所 链接 的 内 容 不 是 文字 或 网 页 ， 而 是 一 个 文件 。 
EEIDp 打开 需要 创建 文件 下 载 链接 的 文档 ， 选 中 要 设置 为 文件 下 载 链接 的 文本 ， 如 
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图 7-33 所 示 ， 然 后 单 击 【 属 性 】 面 板 中 【链接 】 文 本 框 右 侧 的 【浏览 文件 】 按 钮 加 。 
EECSRPp 打开 【选择 文件 】 对 话 框 ， 选 择 要 链接 的 下 载 文件 ， 例 如 “营销 网 络 .gxt” 文 
件 ， 然 后 单 击 【确定 】 按 钮 ， 即 可 创建 文件 下 载 ， 链 接 ， 如 图 7-34 所 示 。 


图 7-33 选择 文本 图 7-34 【选择 文件 】 对 话 框 
7.2.8 案例 8 一 一 创建 空 链接 


所 谓 空 链接 ， 是 指 没有 目标 端点 的 链接 。 利 用 空 链接 可 以 激活 文档 中 链接 对 应 的 对 象 和 
文本 。 一 旦 对 象 或 文本 被 激活 ， 就 可 以 为 之 添加 一 个 行为 ， 以 实现 当 光 标 移 动 到 链接 上 时 ， 
进行 切换 图 像 或 显示 分 层 等 动作 。 创 建 空 链接 的 具体 步骤 如 下 。 

本 于 在 文档 窗口 中 ， 选 中 要 设置 为 空 链 接 的 文本 或 图 像 ， 如 图 7-35 所 示 。 
EEJPp 打开 【属性 】 面 板 ， 在 【链接 】 文 本 框 中 输入 一 个 “# ”号 ， 即 可 创建 空 链接 ， 
如 图 7-36 所 示 。 
冰 bvgPBavpocumanteichoryndeuhenl orwU -ox 
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图 7-35 选择 图 像 图 7-36 【属性 】 面 板 
7.2.9 案例 9 一 一 创建 脚本 链接 


脚本 链接 是 另 一 种 特殊 类 型 的 链接 ， 通 过 单 击 带 有 脚本 链接 的 文本 或 对 象 ， 可 以 运行 相 
应 的 脚本 及 函数 (JavaScript 和 VBScript 等 )， 从 而 为 浏览 者 提供 许多 附加 信息 。 脚 本 链接 还 可 
以 被 用 来 确认 表单 。 创 建 脚 本 链接 的 具体 步骤 如 下 。 
EDp 打开 需要 创建 脚本 链接 的 文档 ， 选 择 要 创建 脚本 链接 的 文本 、 图 像 或 其 他 对 
象 ， 这 里 选中 文本 “客服 中 心 ”， 如 图 7-37 所 示 。 
ES 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 “javaScript ”， 接 着 输入 相应 的 
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[gal 
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JavaScript 代码 或 函数 ， 如 输入 “window.close 0”， 表 示 关 闭 当前 窗口 ， 如 图 7-38 
所 示 。 


本 
mom] ttm 区 可 二: CE 
Es a te 0 


ai er 7 
7-37 ”选择 文本 7-38 ”输入 脚本 代码 
在 代码 “javascript:window.close 0” 中 ， 括 号 内 不 能 有 空格 。 


Ce 
了 提示 
ECDIS 保存 网 页 ， 按 F12 键 在 浏览 器 中 将 网 页 打开 ， 如 图 7-39 所 示 。 单 击 创建 的 脚本 


链接 文本 ， 会 弹出 一 个 对 话 框 ， 单 击 【 是 】 按 钮 ， 将 关闭 当前 窗口 ， 如 图 7-40 所 示 。 


rm JPG 格式 的 图 片 不 支持 脚本 链接 ， 如 要 为 图 像 添加 脚本 链接 ， 则 应 将 图 像 转换 为 
已 。 GIF 格式 。 


理光 由 丰 正 在 区 量 天 关 运 其 卡 ， 
SE 


Ej 9 


图 7-39 预览 网 页 图 7-40 ”提示 信息 框 


7.3 ”案例 10 一 一 链接 的 检查 


当 创建 好 一 个 站 点 之 后 ， 由 于 一 个 网 站 中 的 链接 数量 很 多 ， 因 此 在 上 传 服务 器 之 前 ， 必 
须 先 检查 站 点 中 所 有 的 链接 。 在 Dreamweaver CS6 中 ， 可 以 快速 检查 站 点 中 网 页 的 链接 ， 以 
免 出 现 链接 错误 。 

检查 网 页 链接 的 具体 步骤 如 下 。 

ECGDUD) 在 Dreamweaver 中 ， 选 择 【 站 点 】-_,【 检 查 站 点 范围 的 链接 】 菜 单 命令 ， 此 时 


全 12 


会 激活 链接 检查 器 ， 如 图 7-41 所 示 。 

EEJPp 在 【显示 】 下 拉 列 表 框 中 可 以 选择 【 断 掉 的 链接 】、【 外 部 链接 】 或 【孤立 的 
文件 】 等 选项 。 例 如 选择 【孤立 的 文件 】 选 项 ，Dreamweaver CS6 将 对 当前 链接 情况 
进行 检查 ， 并 且 将 孤立 的 文件 列表 显示 出 来 ， 如 图 7-42 所 示 。 


RE 
显示 EN | 基 立 纺 文件 =] ( 织 有 进入 术 汪 文件 ) 


0 不，14 人 HTML ,1 下面 立 诈 。 从 于 11 个 名 扩 ,7 个 正 硝 ，4 下 灶 计 ，0 个 外 和 


7-41 ”链接 检查 器 图 7-42 选择 【孤立 的 文件 】 选 项 


EEJRB 对 于 有 问题 的 文件 ， 直 接 双 击 ， 即 可 将 其 打开 进行 修改 。 
为 网 页 建立 链接 时 要 经 常 检查 ， 因 为 一 个 网 站 都 是 由 多 个 页 面 组 成 的 ， 一 旦 出 现 空 链接 
或 链接 错误 的 情况 ， 就 会 对 网 站 的 形象 造成 不 好 的 影响 。 


7.4 ”实战 演练 一 一 为 企业 网 站 添加 友情 链接 


使 用 链接 功能 可 以 为 企业 网 站 添加 友情 链接 ， 其 具体 操作 步骤 如 下 。 

ETDp 打开 光盘 中 的 “ch07\ 创 建 锚 链 接 \index.html” 文 件 。 在 页 面 底部 输入 需要 添加 的 
友情 链接 名 称 ， 如 图 7-43 所 示 。 

ED 选中 “百度 ”文件 ， 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 “wwwbaidu.com”， 
如 图 7-44 所 示 。 


图 7-43 输入 友情 链接 文本 图 7-44 ”添加 链接 地 址 


本 也 BY 重复 step02 的 操作 ， 选 中 其 他 文字 ， 并 为 这 些 文字 添加 链接 ， 如 图 7-45 所 示 。 
EC 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 单 击 其 中 的 链接 ， 即 可 打开 相应 的 
网 页 ， 如 图 7-46 所 示 。 
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图 7-45 添加 其 他 文本 的 链接 地 址 图 7-46 预览 网 页 


7.5 ” 跟 我 练 练 手 


7.5.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 


7.5.2 上 机 练习 


练习 1: 在 网 页 中 添加 超 链接 。 
练习 2: 进行 链接 的 检查 。 
练习 3: 为 企业 网 站 添加 超 链 接 。 


7.6 高 手 甜 点 


甜点 1: 如 何在 Dreamweaver 中 去 除 网 页 中 链接 文字 下 面 的 下 划 线 


在 完成 网 页 中 的 链接 制作 之 后 ， 链 接 文字 下 方 往往 会 自动 添加 一 条 下 划 线 ， 用 来 标示 该 
内 容 包含 超级 链接 。 当 一 个 网 页 中 链接 比较 多 时 ， 就 显得 杂乱 了 ， 其 实 可 以 很 方便 地 将 其 去 
除 掉 。 具 体操 作 方法 是 : 在 【属性 】 面 板 中 单 击 【页 面 属 性 】 按 钮 ， 打 开 【 页 面 属性 】 对 话 
框 ， 在 【分 类 】 列 表 框 中 选择 【链接 】 选 项 ， 在 【下 划 线 样式 】 下 拉 列 表 杠 中， 选择 【始终 
无 下 划 线 】 选 项 ， 即 可 去 除 掉 网 页 中 链接 文字 下 面 的 下 划 线 。 


甜点 2: 在 为 图 像 设置 热点 链接 时 ， 为 什么 之 前 为 图 像 设置 的 普通 链接 无 法 使 用 


一 张 图 像 只 能 创建 普通 链接 或 热点 链接 之 一 ， 如 果 同 一 张 图 像 在 创建 了 普通 链接 后 又 创 
建 热 点 链接 ， 则 普通 链接 无 效 ， 只 有 热点 链接 有 效 。 
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箱 的 模块 ， 这 些 模块 都 是 通过 添加 网 


》 


> 


翁 
(0 


0 
0 


区 


人 


p27 


表单 等 ， 这 就 是 网 页 行为 。 本 章 就 来 介绍 如 何 使 用 网 
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很 多 网 站 都 有 申请 注册 成 为 会 员 或 申请 邮 
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页 表单 来 完成 的 。 另外， 设计 人 员 在 设计 网 页 时 ， 需 要 使 用 编程 语言 实现 一 些 


作 ， 如 打开 浏览 器 窗口 、 验 证 
页 表单 和 行为 。 
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网 页 设计 与 网 站 建设 
案例 课堂 ~ 


8.1 在 网 页 中 插入 表单 元 素 


表单 用 于 把 来 自用 户 的 信息 提交 给 服务 器 ， 是 网 站 管理 者 与 浏览 者 之 间 进 行 沟通 的 桥 
梁 。 利 用 表单 处 理 程序 ， 可 以 收集 、 分 析 用 户 的 反馈 意见 ， 以 做 出 科学 、 合 理 的 决策 ， 因 此 
它 是 一 个 网 站 成 功 的 重要 因素 。 


8.1.1 案例 1 一 一 插入 表单 域 


每 一 个 表单 中 都 包括 表单 域 和 若干 个 表单 元 素 ， 而 所 有 的 表单 元 素 都 要 放 在 表单 域 中 才 
会 生效 ， 因 此 ， 制 作 表单 时 要 先 插 入 表单 域 。 
在 文档 中 插入 表单 域 的 具体 操作 步骤 如 下 。 
EC 将 光标 放置 在 要 插入 表单 的 位 置 ， 选 择 【插入 】 一 【表单 】 一 【表单 】 菜 单 命 
令 ， 如 图 8-1 所 示 。 


Sm 要 插入 表单 域 ， 也 可 以 在 【插入 面板 的 【表单 〗 选 项 卡 中 单 击 【 表 单 〗 按 钮 . 


ECERP9 插入 表单 域 后 ， 页 面 上 会 出 现 一 条 红色 的 虚线 ， 如 图 8-2 所 示 。 
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8-1 ”选择 【表单 】 菜 单 命令 8-2 插入 表单 


EEJS 选中 表单 ， 或 在 标签 选择 器 中 选择 form#forml 标签 ， 即 可 在 表单 的 【属性 】 面 
板 中 设置 属性 ， 如 图 8-3 所 示 。 


em 
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8-3 【属性 】 面 板 
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8.1.2 ”案例 2 一 一 插入 文本 域 


根据 不 同 的 类 型 ， 文 本 域 可 分 为 3 种 : 单 
行文 本 域 、 多 行文 本 域 和 密码 域 。 

选择 【插入 】 一 【表单 】 一 【文本 域 】 菜 
单 命令 ， 或 在 【插入 】 面 板 的 【表单 】 选 项 卡 
中 单 击 【文本 字段 】 按 钮 和 【文本 区 域 】 按 
钮 ， 都 可 以 在 表单 域 中 插入 文本 域 ， 如 图 8-4 
所 示 。 


8.1.3 ”案例 3 一 一 插入 单行 文本 域 


单行 文本 域 通常 提供 单字 或 短语 响应 ， 如 ed 
姓名 或 地 址 等 。 

选择 【插入 】 一 【表单 】 一 【文本 域 】 菜单 命令 ， 或 在 【插入 】 面 板 的 【表单 】 选 项 卡 
中 单 击 【文本 字段 】 按 钮 ， 


Dw ws » | Es [ol x ] 
AHH Mi BEM END NAM Wl0) #10 站 9 HOW RMI 


Ce 


本 
‘Do IY alE|g gools 
eed 


EE TT 


日 
Ds 
上 
半 字 关 乙 洲 河 到 洱 窟 一 潭 半 半 加 六 到 庆 协 8 小明 


8-5 ”插入 单行 文本 域 


em 插入 文本 域 后 ， 只 要 在 【属性 】〗 面 板 中 将 【类 型 〗 设 置 为 【单行 〗， 即 为 单行 广 


SS 本 域 。 


8.1.4 ”案例 4 一 一 插入 多 行文 本 域 


选择 【插入 】 一 【表单 】 一 【文本 区 域 】 菜 单 命令 ,或 在 【插入 】 面 板 的 【表单 】 选 项 
卡 中 单 击 【 文 本 区 域 】 按 钮 ， 即 可 插入 多 行文 本 域 ， 如 图 8-6 所 示 。 


5 到 | 插入 文本 域 后 ， 只 要 在 【属性 了 面板 中 将 【类 型 】 设 置 为 【多 行 】， 即 为 多 行文 
SS 本 域 。 多 行文 本 域 可 为 访问 者 提供 一 个 较 大 的 区 域 ， 供 其 输入 响应 ， 还 可 以 指定 访问 
者 最 多 可 输入 的 行 数 以 及 对 象 的 字符 宽度 。 如 果 输 入 的 文本 超过 了 这 些 设置 ， 该 域 将 


按照 换行 属性 中 指定 的 设置 进行 滚动 。 
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8-6 插入 多 行文 本 域 


8.1.5 “案例 5 一 一 插入 密码 域 


密码 域 是 特殊 类 型 的 文本 域 。 当 用 户 在 密码 域 中 输入 文本 信息 时 ， 所 输入 的 文本 会 被 蔡 
换 为 星 号 或 项 目 符号 以 隐藏 该 文本 ， 从 而 保护 这 些 信息 不 被 别人 看 到 ， 如 图 8-7 所 示 。 

当 插 入 文本 域 之 后 ， 在 【属性 】 面 板 中 设置 【类 型 】 为 【密码 】， 即 可 插入 密码 域 ， 如 
图 8-8 所 示 。 


© saaa 手机 号 登录 四 


HPS @163com 
窗 四 | woweees ET? 


和 
i 
月 


E20 和 夺 席 | 闫 型 一 单行 6) 站 行 0) 。 问 宇 9) 
| 登录 | | 注册 EE Ee | 
ee gig 
8-7 ”密码 显示 方式 图 8-8 设置 【类 型 】 为 【密码 】 


8.2 在 网 页 中 插入 复 选 框 和 单 选 按钮 


复 选 框 允许 在 一 组 选项 中 选择 多 个 选项 ， 用 户 可 以 选择 任意 多 个 适用 的 选项 。 单 选 按钮 
代表 互相 排斥 的 选择 。 在 某 个 单 选 按钮 组 (由 两 个 或 多 个 共享 同一 名 称 的 按钮 组 成 ) 中 选择 一 个 
选项 ， 就 会 取消 对 该 组 中 其 他 所 有 选项 的 选择 。 

8.2.1 案例 6 一 一 插入 复 选 杠 

如 果 要 从 一 组 选项 中 选择 多 个 选项 ， 则 可 使 用 复 选 框 。 可 以 使 用 如 下 两 种 方法 插入 复 

选 框 。 


(1) 选择 【插入 】 一 【表单 】 一 【 复 选 框 】 菜 单 命令 ， 如 图 8-9 所 示 。 
(2) 单 击 【 插 入 】 面 板 下 【表单 】 选 项 卡 中 的 【 复 选 框 】 按 钮 ， 如 图 8-10 所 示 。 
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8-9 选择 【 复 选 框 】 菜 单 命令 图 8-10 单 击 【 复 选 框 】 按 钮 


若 要 为 复 选 框 添加 标签 ， 可 在 该 复 选 框 的 旁边 单 击 ， 然 后 输入 标签 文字 即 可 ， 如 图 8-11 
所 示 。 另 外 ， 选 中 复 选 框 只， 在 【属性 】 面 板 中 可 以 设置 其 属性 ， 如 图 8-12 所 示 。 


8-11 输入 复 选 框 标签 文字 图 8-12 复 选 框 【 属 性 】 面板 
8.2.2 ”案例 7 一 一 插入 单 选 按钮 


如 果 从 一 组 选项 中 只 能 选择 一 个 选项 ， 则 需要 使 用 单 选 按钮 。 选 择 【 插 入 】 一 【表单 】 一 
【 单 选 按钮 】 菜 单 命令 ， 即 可 插入 单 选 按钮 。 


Sm 还 可 以 通过 单 击 【插入 】 面 板 下 【表单 〗 选 项 卡 中 的 【 单 选 按钮 〗 按 钮 来 插入 单 
民选 按钮。 


若 要 为 单 选 按钮 添加 标签 ， 可 在 该 单 选 按钮 的 旁边 单 击 ， 然 后 输入 标签 文字 即 可 ， 如 
图 8-13 所 示 。 选 中 单 选 按钮 吕 ， 在 【属性 】 面 板 中 可 以 设置 其 属性 ， 如 图 8-14 所 示 。 
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8-13 ”输入 单 选 按钮 标签 文字 图 8-14 单 选 按钮 【属性 】 面 板 


8.3 在 网 页 中 插入 表单 


表单 有 两 种 类 型 : 一 种 是 单 击 时 下 拉 的 菜单 ， 称 为 下 拉 菜 
单 ; 另 一 种 则 显示 为 一 个 列 有 项 目的 可 滚动 列表 ， 用 户 可 从 该 
列表 中 选择 项 目 ， 被 称 为 滚动 列表 。 如 图 8-15 所 示 分 别 是 下 


财经 新 闻 部 | 
时 娱乐 新 闻 ， 
“| | 体育 新 闻 加 | 


拉 菜 单 和 滚动 列表 。 8-15 ”下拉 菜单 和 滚动 列表 
8.3.1 案例 8 一 一 插入 下 拉 菜 单 
创建 下 拉 菜单 的 具体 步骤 如 下 。 


EC 选择 【插入 】 一 【表单 】 一 【选择 (列表 /菜单 )】 菜 单 命令 ， 即 可 插入 列表 / 菜 
单 ， 然 后 在 其 【属性 】 面 板 中 ， 在 【类 型 】 选 项 组 中 选中 【菜单 】 单 选 按钮 ， 如 
图 8-16 所 示 。 

ECJDp 单 击 【列表 值 】 按 钮 ， 在 打开 的 对 话 框 中 进行 相应 的 设置 ， 如 图 8-17 所 示 。 


六 各 型 下 各 单 中 BEVE 
口外 。 让 正二 4 


| 
图 8-16 选中 【菜单 】 单 选 按 钮 图 8-17 【列表 值 】 对 话 框 
EC 单 击 【 确 定 】 按 钮 ， 在 【属性 】 面 板 的 【初始 化 时 选 定 】 下 拉 列 表 框 中 选择 
【体育 】 选 项 ， 如 图 8-18 所 示 。 
ED 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 8-19 所 示 。 


[ET 类 多 无 


全 136 


如 和 


可 
同 i ear 3 CC 关口 天 
[leet CM 


EE 
| 


图 8-18 选择 初始 化 时 选 定 的 菜单 图 8-19 ”预览 效果 
8.3.2 ”案例 9 一 一 插入 滚动 列表 


创建 滚动 列表 的 具体 步骤 如 下 。 
EEC 选择 【插入 】 一 【表单 】 一 【选择 (列表 /菜单 )】 菜 单 命令 ， 插 入 列表 /菜单 ， 然 


后 在 其 【属性 】 面 板 中 ， 在 【类 型 】 选 项 组 中 选中 【列表 】 单 选 按钮 ， 并 将 【高 
度 】 设 置 为 3， 如 图 8-20 所 示 。 


[加 
转 选择 关 型 一 荣 单 上 ) 高 度 00 3 | ET 类 加 无 - 
加 列表 由。 这 定 范围 门 记 许多 选 们 
禄 给 化 8 证 


8-20 ”选中 【列表 】 单 击 按钮 


ECESRPp 单 击 【列表 值 】 按 钮 ， 在 打开 的 对 话 框 中 进行 相应 的 设置 ， 如 图 8-21 所 示 。 
EEJSp 单 击 【确定 】 按 钮 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 8-22 所 示 。 


Ec- 


站 HANUserswdminis 刀 ~ cx] 


图 8-21 【列表 值 】 对 话 框 8-22 ”预览 效果 


8.4 在 网 页 中 插入 按钮 


按钮 对 表单 来 说 是 必 不 可 少 的 ， 无 论 用 户 对 表单 进行 了 什么 操作 ， 只 要 不 单 击 【提交 】 
按钮 ， 服 务 器 与 客户 之 间 就 不 会 有 任何 交互 操作 。 


8.4.1 案例 10 一 一 插入 按钮 
将 光标 放 在 表单 内 ， 选 择 【 插 入 】 一 【表单 】 一 【按钮 】 菜 单 命 令 ， 即 可 插入 按钮 ， 如 


过 村 过 相 沙 加 习 酒 让 一 一 泊 
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图 8-23 所 示 。 


选中 表单 按钮 玛 惠 ， 即 可 在 打开 的 【属性 】 面 板 中 设置 【按钮 名 称 】、【 值 】、【 动 
作 】、【 类 】 等 属性 ， 如 图 8-24 所 示 。 


Bi Tr OI, | 


图 8-23 插入 按钮 图 8-24 设置 按钮 的 属性 
8.4.2 ”案例 11 一 一 插入 图 像 按 钮 


可 以 使 用 图 像 作为 按钮 图 标 。 如 果 要 使 用 图 像 来 执行 任务 而 不 是 提交 数据 ， 则 需要 将 某 
种 行为 附加 到 表单 对 象 上 。 

EC 打开 随 书 光盘 中 的 “ch08&\ 图 像 按 钮 index.html” 文 件 ， 如 图 8-25 所 示 。 

ECRD9 将 光标 置 于 会 员 登录 区 的 下 方 ， 选 择 【插入 】 一 【表单 】 一 【图 像 域 】 菜 单 命 


令 ， 或 拖 动 【 插 入 】 面 板 下 【表单 】 选 项 卡 中 的 【图 像 域 】 按 钮 辐 ， 弹 出 【选择 图 
像 源 文件 】 对 话 框 ， 如 图 8-26 所 示 。 


Oem oe en Peer de rd OCT 
MTG we eee 


多加 ee 


CD mr 
我 们 的 厨师 mar). [ENA ea met wenmenn) [RR 
知道 您 的 口味 
wr nr Er ee 
8-25 ”打开 素材 文件 8-26 【选择 图 像 源 文件 】 对 话 框 


Eee 在 【选择 图 像 源 文件 】 对 话 框 中 选 定 图 像 ， 然 后 单 击 【确定 】 按 钮 ， 插 入 图 像 
域 ， 如 图 8-27 所 示 。 


EC 选中 该 图 像 域 ， 打 开 其 【属性 】 面 板 ， 设 置 图 像 域 的 属性 ， 这 里 采用 默认 设 
置 ， 如 图 8-28 所 示 。 

ECEIDp 按照 添加 【会 员 注 册 】 图 像 按 钮 的 方法 添加 【 找 回 密码 】 和 【登录 】 两 个 图 像 
按钮 ， 如 图 8-29 所 示 。 

EC 完成 设置 后 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 8-30 所 示 。 


我 们 的 若 师 
知道 您 的 口味 … 
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图 8-29 添加 其 他 按钮 图 8-30 ”预览 效果 


8.5 添加 网 页 行为 


行为 是 由 对 象 、 事 件 和 动作 构成 的 。 对 象 是 产生 行为 的 主体 ， 事 件 是 触发 动态 效果 的 原 
因 ， 动 作 是 指 最 终 需要 完成 的 动态 效果 ， 本 节 就 来 介绍 如 何 为 网 页 添加 行为 。 


8.5.1 案例 12 一 一 打开 【行为 】 面 板 
在 Dreamweaver CS6 中 ， 对 行为 的 添加 和 控制 主要 是 通过 【 行 


为 】 面 板 来 实现 的 。【 行为】 面板 主要 用 于 设置 和 编辑 行为 ， 选 择 | 车 区 是 * 
【窗口 】 一 【行为 】 菜单 命令 ， 即 可 打开 【行为 】 面 板 ， 如 图 8-31 
所 示 。 
使 用 【行为 】 面 板 可 以 将 行为 附加 到 页 面 元 素 上 ， 并 且 可 以 修改 
以 前 所 只 加 的 行为 的 数 。 


【行为 】 面 板 中 包含 以 下 一 些 选项 。 

(1) 单 击 二 -按钮 ， 可 弹出 动作 菜单 ， 从 中 可 以 添加 行为 。 添 加 行 “图 8-31 【行为 】 面板 
为 时 ， 从 动作 菜单 中 选择 一 个 行为 项 即 可 。 当 从 该 动作 菜单 中 选择 一 个 动作 时 ， 将 出 现 一 个 
对 话 框 ， 可 以 在 此 对 话 框 中 指定 该 动作 的 参数 。 如 果 动 作 菜 单 中 的 所 有 动作 都 处 于 灰 显 状 
态 ， 则 表示 选 定 的 元 素 无 法 生成 任何 事件 。 
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(2) 单 击 一 按钮 ， 可 从 行为 列表 中 删除 所 选 的 事件 和 动作 。 
(3) 单 击 按钮 或 按钮 ， 可 将 动作 项 向 前 移 或 向 后 移 ， 从 而 改变 动作 执行 的 顺序 。 对 
于 不 能 在 列表 中 上 下 移动 的 动作 ， 箭 头 按钮 则 处 于 禁用 状态 。 
Sn 在 为 选 定 对 象 添加 了 行为 后 ， 就 可 以 利用 行为 的 事件 列表 选择 触发 该 行为 的 事 
鲸 。 件 。 使 用 ShifttF4 组 合 键 也 可 以 打开 【行为 了 面板 。 


8.5.2 ”案例 13 一 一 添加 行为 


在 Dreamweaver CS6 中 ， 可 以 为 文档 、 图 像 、 链 接 、 表 单 等 任何 网 页 元 素 添加 行为 。 在 
给 对 象 添加 行为 时 ， 可 以 一 次 为 每 个 事件 添加 多 个 动作 ， 并 按 【 行 为 】 面 板 中 动作 列表 的 顺 
序 来 执行 动作 。 添 加 行为 的 具体 步骤 如 下 。 

本 TY 在 网 页 中 选 定 一 个 对 象 ， 也 可 以 单 击 文档 窗口 左下 角 的 <body> 标 签 选 中 整个 页 
面 ， 然 后 选择 【窗口 】 一 【行为 】 菜 单 命令 ， 打 开 【 行 为 】 面 板 ， 单 击 二 -按钮 ， 弹 
出 动作 菜单 ， 如 图 8-32 所 示 。 

本 TY 从 弹出 的 动作 菜单 中 选择 一 种 动作 ， 会 弹出 相应 的 参数 设置 对 话 框 (此 处 选择 
【弹出 信息 】 命 令 )， 在 其 中 进行 设置 后 单 击 【 确 定 】 按 钮 ， 随 即 ， 在 事件 列表 中 会 
显示 动作 的 默认 事件 ， 单 击 该 事件 ， 会 出 现 一 个 下 拉 按 钮 ， 单 击 下 拉 按 钮 ， 即 可 弹 
出 包含 全 部 事件 的 事件 列表 ， 如 图 8-33 所 示 。 


图 8-32 动作 菜单 图 8-33 事件 列表 


8.6 ”常用 行为 的 应 用 


Dreamweaver CS6 内 置 有 许多 行为 ， 每 一 种 行为 都 可 以 实现 一 个 动态 效果 ， 或 用 户 与 网 
页 之 间 的 交互 。 
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8.6.1 案例 14 一 一 交换 图 像 


【交换 图 像 】 动 作 通过 更 改 图 像 标签 的 ste 属性 ， 将 一 个 图 像 和 另 一 个 图 像 交换 。 使 用 此 
动作 可 以 创建 鼠标 经 过 图 像 和 其 他 图 像 效 果 (包括 一 次 交换 多 个 图 像 )。 
创建 【交换 图 像 】 动 作 的 具体 步 又 如 下 。 
ET 打开 随 书 光盘 中 的 “ch08\ 应 用 行为 index html” 文件 ， 如 图 8-34 所 示 。 
GET 选择 【窗口 【行为 】 菜单 命令 ， 打 开 【 行 为 】 面 板 。 选 中 图 像 ， 单 击 *- 按 
钮 ， 在 弹出 的 菜单 中 选择 【交换 图 像 】 命 令 ， 如 图 8-35 所 示 。 


CE ECE err EE 
EY 了 
可 页 全 和 分 类 世 | | 起 | [天 县 雪 | 


图 8-34 ”打开 素材 文件 8-35 选择 【交换 图 像 】 命 令 


ECDIS 弹出 【交换 图 像 】 对 话 框 ， 如 图 8-36 所 示 。 
EEC 单 击 【浏览 】 按 钮 ， 弹 出 【选择 图 像 源 文件 】 对 话 框 ， 从 中 选择 一 幅 图 像 ， 


如 图 8-37 所 示 。 
A er i 
Er -OF ER 
了 控 。 
证 加 
2 
E77 
1 
广 名 四 。 页 ED | me 
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i 
团 扩 山名 
8-36 【交换 图 像 】 对 话 框 8-37 【选择 图 像 源 文件 】 对 话 杠 


EECDRD 单 击 【 确 定 】 按 钮 ， 返 回 【交换 图 像 】 对 话 框 ， 如 图 8-38 所 示 。 
EEID 单 击 【确定 】 按 钮 ， 添 加 【交换 图 像 】 行 为 ， 如 图 8-39 所 示 。 


过 冲 尖 忆 订 潮 习 酒 党 一 一 潭 由 时 回 河 习 所 翰 8 溃 品 
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8-38 设置 原始 图 像 图 8-39 添加 【交换 图 像 】 行 为 
EDUDD 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 8-40 所 示 。 


8-40 ”预览 效果 
8.6.2 ”案例 15 一 一 弹出 信息 


使 用 【弹出 信息 】 动 作 可 显示 一 个 带 有 指定 信息 的 JavaScript 警告 。 因 为 JavaScript 警告 
只 有 一 个 【确定 】 按 钮 ， 所 以 使 用 此 动作 可 以 提供 信息 ， 而 不 能 为 用 户 提供 选择 。 
使 用 【弹出 信息 】 动 作 的 具体 步骤 如 下 。 
EEDDD) 打开 随 书 光盘 中 的 “ch08\ 应 用 行为 \index html” 文 件 ， 如 图 8-41 所 示 。 
EDy 单 击 文档 窗口 状态 栏 中 的 <body> 标 签 ， 选 择 【 窗 口 】 一 【行为 】 菜 单 命 令 ， 打 
开 【 行 为 】 面 板 。 单 击 【 行 为 】 面 板 中 的 二 -按钮 ， 在 弹出 的 菜单 中 选择 【弹出 信 
息 】 命 令 ， 如 图 8-42 所 示 。 


8-41 打开 素材 文件 8-42 选择 【弹出 信息 】 命 令 
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8.6.3 ”案例 16 一 一 打开 浏览 器 窗口 


(包括 其 大 小 )、 特 性 (是 否 可 以 调整 大 小 、 是 否 具 有 菜单 栏 等 ) 和 名 称 。 


本 TE> 弹出 【弹出 信息 】 对 话 框 ， 在 【消息 】 文 本 框 中 输入 要 显示 的 信息 ， 如 图 8-43 
所 示 。 

ED 单 击 【确定 】 按 钮 ， 添 加 行为 ， 并 设置 相应 的 事件 ， 如 图 8-44 所 示 。 

GTBY 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 8-45 所 示 。 


过 冲 涂 乙 订 河 习 泗 窒 一 一 漂 耐 半 回 河 到 订 需 8 洲 


图 8-43 【弹出 信息 】 对 话 框 8-44 ”添加 行为 事件 8-45 ”预览 效果 


使 用 【打开 浏览 器 窗口 】 动 作 可 以 在 一 个 新 的 窗口 中 打开 URL， 可 以 指定 新 窗口 的 属性 


使 用 【打开 浏览 器 窗口 】 动 作 的 具体 步骤 如 下 。 
ET 打开 随 书 光盘 中 的 “cho8\ 应 用 行为 \index-html” 文 件 ， 如 图 8-46 所 示 。 
ET 选择 【窗口 】 一 【行为 】 菜 单 命令 ， 打 开 【 行 为 】 面 板 。 单 击 该 面板 中 的 +*- 按 


生 拓 本 后头 
| [3 
Ee 


8-46 ”打开 素材 文件 8-47 ”选择 【打开 浏览 器 窗口 】 命 令 


攻 于 BY 弹出 【打开 浏览 器 窗口 】 对 话 框 ， 在 【要 显示 的 URL】 文本 框 中 输入 在 新 窗口 
中 载 入 的 目标 URL 地 址 (可 以 是 网 页 ， 也 可 以 是 图 像 ); 或 单 击 【 要 显示 的 URL】 文 
本 框 右 侧 的 【浏览 】 按 钮 ， 弹 出 【选择 文件 】 对 话 框 ， 如 图 8-48 所 示 。 

EC 在 【选择 文件 】 对 话 框 中 选择 文件 ， 单 击 【 确 定 】 按 钮 ， 将 其 添加 到 【要 显示 
的 URL) 文本 框 中 ， 然 后 将 【窗口 宽度 】 和 【窗口 高 度 】 分 别 设置 为 380 和 350， 
在 【窗口 名 称 】 文 本 框 中 输入 “弹出 窗口 ”， 如 图 8-49 所 示 。 
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2 有 四。 下 [m3 RE 。。 口 Rs 条 
RH, [RE a a 站 ws。 门 eHR 和 
吧 多 [8 ] © wee 司 测验 大 4 手 有 
7 ooremt 硬 吕 有: 漆器 密 吕 | 
中 m1 于 
图 8-48 【选择 文件 】 对 话 框 8-49 【打开 浏览 器 窗口 】 对 话 框 


ET 单 击 【确定 】 按 钮 ， 添 加 行为 ， 并 设置 相应 的 事件 ， 如 图 8-50 所 示 。 
E> 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 8-51 所 示 。 


~ Ya 
re PEE 
标 答 恰 可 辣 
| 属性 [行为 | 标签 Vedr> 
Cl 
8-50 设置 行为 事件 8-51 ”预览 效果 


8.6.4 案例 17 一 一 检查 表单 


在 包含 表单 的 页 面 中 填写 相关 信息 时 ， 当 信息 填写 出 错时 ， 会 自动 显示 出 错 信息 ， 这 是 
通过 检查 表单 动作 来 实现 的 ， 在 Dreamweaver CS6 中 ， 可 以 使 用 【检查 表单 】 动 作 来 为 文本 
域 设置 有 效 性 规则 ， 检 查 文本 域 中 的 内 容 是 否 有 效 ， 以 确保 输入 数据 正确 。 

使 用 【检查 表单 】 动 作 的 具体 步骤 如 下 。 

EECDp 打开 随 书 光 盘 中 的 “ch08\ 检 查 表单 行为 hm” 文件 ， 如 图 8-52 所 示 。 

EEDy 按 Shift+F4 组合 键 ， 打 开 【 行 为 】 面 板 ， 如 图 8-53 所 示 。 

EDUB) 单 击 【行为 】 面 板 中 的 二 按钮， 在 弹出 的 菜单 中 选择 【检查 表单 】 命 令 ， 如 

图 8-54 所 示 。 
EEC 弹出 【检查 表单 】 对 话 框 ，【 域 】 列 表 框 中 显示 了 文档 中 插入 的 文本 域 ， 如 
图 8-55 所 示 。 


ET 


he -站 本 ssertoeasm 


8-52 ”打开 素材 文件 8-53 【行为 】 面 板 


年 闫 必用 的 


可 接受 :全 八 信永 百 © gs 
© 了 部 和 OMFM 


8-54 ”选择 【检查 表单 】 命 令 图 8-55 【检查 表单 】 对 话 框 


EEDDp 选中 textfield3 文本 域 ， 勾 选 【 必 需 的 】 复 选 框 ， 选 中 【任何 东西 】 单 选 按钮 ， 
设置 该 文本 域 是 必须 填写 项 ， 可 以 输入 任何 文本 内 容 ， 如 图 8-56 所 示 。 

EGRe 参照 相同 的 方法 ， 设 置 textfield2 和 textfield6 文本 域 为 必须 填写 项 ， 其 中 
textfield2 文本 域 的 可 接受 类 型 为 【数字 】，textfield6 文本 域 的 可 接受 类 型 为 【任何 
东西 】， 如 图 8-57 所 示 。 


年 四 | 必 委 量 


可 接受 图 任何 计 丁 © 数字 可 接受 加 任 何 东 至 © ns 
ED 问 志 子 部 术 地 二。 日 数字 从 


图 8-56 设置 检查 表单 属性 图 8-57 设置 其 他 检查 信息 
ED 单 击 【 确 定 】 按 钮 ， 即 可 添加 【检查 表单 】 行 为 ， 如 图 8-58 所 示 。 


EEC 保存 文 要 ， 按 F12 键 在 浏览 器 中 预览 效果 。 当 在 文档 的 文本 域 中 未 填写 或 填写 
有 误 时 ， 会 打开 一 个 提示 对 话 框 ， 提 示 出 错 信息 ， 如 图 8-59 所 示 。 


145@ 


网 页 设计 与 网 站 建设 


3 

于 了 
[= 
rT 二 


8-58 ”添加 【检查 表单 】 行 为 8-59 ”预览 网 页 提示 信息 

8.6.5 ”案例 18 一 一 设置 状态 栏 文本 

使 用 【设置 状态 栏 文本 】 动 作 可 在 浏览 器 窗口 底部 左 侧 的 状态 栏 中 显示 消息 。 例 如 ， 可 

以 使 用 此 动作 在 状态 栏 中 显示 链接 的 目标 而 不 是 显示 与 之 关联 的 URL。 
设置 状态 栏 文本 的 操作 步骤 如 下 。 
EEIDp 打开 随 书 光盘 中 的 “ch0 和 设置 状态 栏 index.html” 文 件 ， 如 图 8-60 所 示 

EDp 按 Shift+F4 组 合 键 ， 打 开 【 行 为 】 面 板 ， 如 图 8-61 所 示 。 
Ca 


8-61 【行为 】 面 板 


图 8-60 ”打开 素材 文件 
革 BY 单 击 【 行 为 】 面 板 中 的 十 -按钮 ， 在 弹出 的 菜单 中 选择 【设置 文本 】 一 【设置 状 
I 9 


态 栏 文本 】 命 令 ， 如 图 8-62 所 示 。 
EEC 弹出 【设置 状态 栏 文本 】 对 话 框 ， 在 【消息 】 文 本 框 中 输入 “欢迎 光临 ! ” 


也 可 以 输入 相应 的 JavaScript 代码 ， 如 图 8-63 所 示 


向 总 - 欢迎 光临 1 
三 六 所 万 和 阁 基 基 去 苦于 关 古 文 二 三 委 区 


和 人 用 月 一半 全 直 未 汉 三 芋 三 记 齐 由 攻关 


8-62 ”选择 【设置 状态 栏 文本 】 命 令 图 8-63 【设置 状态 栏 文本 】 对 话 框 
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EEIDp 单 击 【确定 】 按 钮 ， 添 加 行为 ， 如 图 8-64 所 示 。 
区 于 BY 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 8-65 所 示 。 


图 8-64 ”添加 行为 图 8-65 ”预览 效果 


过 冲 汰 愉 订 河 加 泗 窒 一 一 漂 耐 半 辕 河 到 订 几 8 小 


8.7 ”实战 演练 一 一 使 用 表单 制作 留言 本 


一 个 好 的 网 站 ， 总 是 在 不 断 地 完善 和 改进 ， 在 改进 的 过 程 中 ， 总 是 要 经 常 听取 别人 的 意 
见 ， 为 此 可 以 通过 留言 本 来 获取 浏览 者 浏览 网 站 的 反馈 信息 。 
其 具体 操作 步骤 如 下 。 
EEC 打开 随 书 光盘 中 的 “ch08\ 制 作 留 言 本 .html” 文 件 ， 如 图 8-66 所 示 。 
EC 将 光标 移 到 下 一 行 ， 单 击 【 插 入 】 面 板 下 【表单 】 选 项 卡 中 的 【表单 】 按 钮 回 ， 
插入 一 个 表单 ， 如 图 8-67 所 示 。 


Wane ocre nt non rE3r md 


ORI ~ 


图 8-66 ”打开 素材 文件 图 8-67 插入 表单 


ECB 将 光标 放 在 红色 的 虚线 内 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ， 打 开 【 表 格 】 
对 话 框 。 将 【 行 数 】 设 置 为 9，【 列 】 设 置 为 2，【 表 格 宽度 】 设 置 为 470 像素 ， 
【边框 粗细 】 设 置 为 1，【 单 元 格 边 距 】 设 置 为 2，【 单 元 格 间距 】 设 置 为 3， 如 
图 8-68 所 示 。 

EC 单 击 【 确 定 】 按 钮 ， 在 表单 中 插入 表格 ， 并 调整 表格 的 宽度 ， 如 图 8-69 所 示 。 

EEJDp 在 第 1 列 单元 格 中 输入 相应 的 文字 ， 然 后 选 定 文字 ， 在 【属性 】 面 板 中 ， 设 置 
文字 的 【大 小 】 为 12 像素 ,将 【水 平 】 设 置 为 【 右 对 齐 】”， 【垂直 】 设置 为 【 居 
中 】， 如 图 8-70 所 示 。 
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行 开 9 EE 


去 遍 究 训 470 |[ 像 案 | 


这 大 开刀 1 Bad 
单元 交 边 瑟 2 | 
兰 元 次 闻 政 了 加 


8-68 【表格 】 对 话 框 图 8-69 添加 表格 


ERD 将 光标 放 在 第 1 行 的 第 2 列 单元 格 中 ， 选 择 【 插 入 】 一 【表单 】 一 【文本 域 】 
菜单 命令 ， 插 入 文本 域 。 在 【属性 】 面 板 中 ， 设 置 文本 域 的 【字符 宽度 】 为 12， 
【最 多 字符 数 】 为 12，【 类 型 】 为 【单行 】， 如 图 8-71 所 示 。 


加 奖 弄 豆单 御 5) 。 字 和 中。 一事 
Ew mm 


i on -| 下 国 别 CE TT 
8-70 ”在 表格 中 输入 文字 图 8-71 添加 文本 域 


GET 重复 以 上 步 又， 在 第 4 行 、 第 5 行 和 第 6 行 的 第 2 列 单元 格 中 插入 文本 域 ， 并 
设置 相应 的 属性 ， 如 图 8-72 所 示 。 

EE 将 光标 放 在 第 2 行 的 第 2 列 单元 格 中 ， 单 击 【插入 】 面 板 下 【表单 】 选 项 卡 中 
的 【 单 选 按钮 】 按 钮 回 ， 插 入 单 选 按钮 ， 在 单 选 按钮 的 右 侧 输入 “ 男 ”， 按 照 同样 
的 方法 再 插入 一 个 单 选 按钮 ， 输 入 “ 女 ”。 在 【属性 】 面 板 中 ， 将 【初始 状态 】 分 
别 设置 为 【已 勾 选 】 和 【未 选中 】， 如 图 8-73 所 示 。 

EE》 将 光标 放 在 第 3 行 的 第 2 列 单元 格 中 ， 单 击 【插入 】 面 板 下 【表单 】 选 项 卡 中 
的 【 复 选 框 】 按 钮 回 ， 插 入 复 选 框 。 在 【属性 】 面 板 中 ， 将 【初始 状态 】 设 置 为 
【未 选中 】， 在 其 后 输入 文本 “音乐 ”， 如 图 8-74 所 示 。 

EGG》 按照 同样 的 方法 ， 插 入 其 他 复 选 框 ， 设 置 属性 并 输入 文字 ， 如 图 8-75 所 示 。 
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图 8-72 添加 其 他 文本 域 图 8-73 ”添加 单 选 按钮 


Cr 
Di “| 再 吕  。 宙 岂 吕 


图 8-74 添加 复 选 框 图 8-75 添加 其 他 复 选 杠 


EC 将 光标 置 于 第 8 行 的 第 2 列 单元 格 中 ， 选 择 【 插 入 】 一 【表单 】 一 【文本 
区 域 】 菜 单 命令 ， 插 入 多 行文 本 域 ，【 属 性 】 面 板 中 的 选项 为 默认 值 ， 如 图 8-76 所 示 。 

EEaP 将 光标 放 在 第 7 行 的 第 2 列 单元 格 中 ， 选 择 【 插 入 】 一 【表单 】 一 【文件 域 】 
菜单 命令 ， 插 入 文件 域 ， 然 后 在 【属性 】 面 板 中 设置 相应 的 属性 ， 如 图 8-77 所 示 。 


图 8-76 插入 多 行文 本 域 图 8-77 插入 文件 域 


EEE) 将 光标 放 在 第 9 行 的 单元 格 中 ， 在 【属性 】 面 板 中 ， 将 【水 平 】 设 置 为 【居中 
对 齐 】， 如 图 8-78 所 示 。 

EC 选择 【插入 】 一 【表单 】 一 【按钮 】 菜 单 命令 ， 插 入 两 个 按钮 : 【提交 】 按 钮 
和 【 重 置 】 按 钮 。 在 【 属性】 面板 中 ， 分 别 设置 相应 的 属性 ， 如 图 8-79 所 示 。 
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保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 8-80 所 示 。 


EE 师 二 
El 


er 村 hs = 区 
国 汪 FF 电 一 Wo 


8-80 ”预览 网 页 效果 


8.8 ” 跟 我 练 练 手 
8.8.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
8.8.2 上 机 练习 


练习 1: 在 网 页 中 插入 表单 元 素 。 

练习 2: 在 网 页 中 插入 单 选 按 钮 与 复 选 框 。 
练习 3: 制作 网 页 列表 和 菜单 。 

练习 4: 在 网 页 中 插入 按钮 。 

练习 5: 常用 行为 的 应 用 。 


8.9 高 手 甜 点 


甜点 1: 如 何 保证 表单 在 浏览 器 中 正常 显示 

在 Dreamweaver 中 插入 表单 并 调整 到 合适 的 大 小 后 ， 在 浏览 器 中 预览 时 可 能 会 出 现 表单 
大 小 失真 的 情况 。 为 了 保证 表单 在 浏览 器 中 能 正常 显示 ， 建 议 使 用 CSS 样式 表 调 整 表单 的 
大 小 。 

甜点 2: 下 载 并 使 用 更 多 的 行为 

Dreamweaver 中 包含 了 百 余 个 事件 、 行 为 ， 如 果 认 为 这 些 行为 还 不 足以 满足 需求 ， 
Dreamweaver 同时 也 提供 扩展 行为 的 功能 ， 可 以 下 载 第 三 方 的 行为 ， 下 载 之 后 解压 到 Dreamweaver 
的 安装 目录 Adobe Dreamweaver CC\configuration\Behaviors\Actions 下 。 重 新 启动 Dreamweaver， 
在 【行为 】 面 板 中 单 击 +, 按 钮 ， 在 弹出 的 动作 菜单 中 即 可 看 到 新 添加 的 动作 选项 。 
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网 页 设计 与 网 站 建设 
案例 课堂 四 一 


9.1 创建 模板 


使 用 模板 创建 文档 可 以 使 网 站 和 网 页 具有 统一 的 结构 和 外 观 。 模 板 实质 上 就 是 用 于 创建 


其 他 文档 的 基础 文档 。 在 创建 模板 时 ， 可 以 说 明 哪 些 网 页 元 素 应 该 长 期 保留 、 不 可 编辑 ， 哪 
些 元 素 可 以 编辑 修改 。 


9.1.1 案例 1 一 一 在 空白 文档 中 创建 模板 


利用 Dreamweaver 的 新 建功 能 可 以 直接 创建 模板 ， 具 体操 作 步 又 如 下 。 

四 了 TY 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 弹 出 【新 建文 档 】 对 话 框 。 在 【新 建文 
档 】 对 话 框 中 选择 【 空 模板 】 选 项 卡 ， 在 【模板 类 型 】 列 表 框 中 选择 【HTML 模 
板 】 选 项 ， 如 图 9-1 所 示 。 

EC) 单 击 【 创 建 】 按 钮 即 可 创建 一 个 空白 的 模板 文档 ， 如 图 9-2 所 示 。 


WERE 


es 
EI 


9-1 【新 建文 档 】 对 话 框 


9.1.2 ”案例 2 一 一 在 【资源 】 面 板 中 创建 模板 


在 【资源 】 面 板 中 创建 模板 的 具体 步骤 如 下 。 

ECDp 选择 【窗口 】 一 【资源 】 菜 单 命令 ， 打 开 【 资 源 】 面 板 ， 如 图 9-3 所 示 。 

ED 在 【资源 】 面 板 中 ， 单 击 【模板 】 按 钮 图 ，【 资 源 】 面 板 将 变 成 模板 样式 ， 如 
图 9-4 所 示 。 

ED 单 击 【资源 】 面 板 右 下 角 的 【新 建 模板 】 按 钮 固 ， 或 在 【资源 】 面 板 的 列表 中 
右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建 模板 】 命 令 ， 如 图 9-5 所 示 。 


EEC 一 个 新 的 模板 就 被 添加 到 了 模板 列表 中 ， 选 择 该 模板 ， 然 后 修改 模板 的 名 称 即 
可 ， 如 图 9-6 所 示 。 


9-2 ”创建 空白 模板 


模板 


II 


图 9-4 ”模板 样式 
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更 新 站 点 (P)。 六 
和 (OC) » Ta 一 
在 站 点 走 位 (D) Cm 
9-5 选择 【新 建 模板 】 命 令 9-6 选择 创建 的 模板 
mm 一 个 空 模板 创建 完成 后 ， 如 果 要 编辑 该 模板 ， 可 单 击 【编辑 】 按 钮 国 ， 进 入 模板 


编辑 状态 。 单 击 【 资 源 】 面 板 右 上 角 的 【菜单 〗 按 钮 国 ， 或 在 要 重 命名 的 模板 上 单 击 
右键 ， 从 弹出 的 快捷 菜单 中 选择 【 重 命名 】 命 令 ， 可 以 对 模板 重 命名 。 


9.1.3 ”案例 3 一 一 从 现 有 文档 创建 模板 


除了 上 述 两 种 创建 模板 的 方法 外 ， 用 户 还 可 以 从 现 有 文档 创建 模板 ， 有 具体 操作 步骤 如 下 。 

EEIDp 打开 随 书 光盘 中 的 “ch09\index.html” 文 件 ， 如 图 9-7 所 示 。 

EEIPy 选择 【文件 】 一 【另存 为 模板 】 菜 单 命令 ， 弹 出 【另存 模板 】 对 话 框 ， 在 【站 
点 】 下 拉 列 表 框 中 选择 保存 的 站 点 模板 ， 在 【另存 为 】 文 本 框 中 输入 模板 名 ， 如 
图 9-8 所 示 。 

EC) 单 击 【保存 】 按 钮 ， 弹 出 提示 对 话 框 ， 单 击 【 是 】 按 钮 ， 即 可 将 网 页 文件 保存 
为 模板 ， 如 图 9-9 所 示 。 
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NN 图 9-7 ”打开 素材 文件 图 9-8 【另存 模板 】 对 话 框 ”图 9-9 ”提示 对 话 框 
改 \ 
9.1.4 ”案例 4 一 一 创建 可 编辑 区 域 


在 创建 模板 之 后 ， 用 户 需 要 根据 自己 的 具体 要 求 对 模板 中 的 内 容 进 行 编辑 ， 即 指定 哪些 
内 容 可 以 编辑 ， 哪 些 内 容 不 能 编辑 (锁定 )。 

在 模板 文档 中 ， 可 编辑 区 是 页 面 中 变化 的 部 分 ， 如 “每 日 导读 ”的 内 容 。 不 可 编辑 区 ( 锁 
定 区 ) 是 各 页 面 中 相对 保持 不 变 的 部 分 ， 如 导航 栏 、 栏 目标 志 等 。 

当 新 创建 一 个 模板 或 把 已 有 的 文档 存 为 模板 时 ，Dreamweaver CS6 默认 把 所 有 的 区 域 标 
记 为 锁定 。 因 此 ， 用 户 必 须根 据 自 己 的 要 求 对 模板 进行 编辑 ， 把 某 些 部 分 标记 为 可 编辑 的 。 

在 编辑 模板 时 ， 可 以 修改 可 编辑 区 ， 也 可 以 修改 锁定 区 。 但 当 该 模板 被 应 用 于 文档 时 ， 
则 只 能 修改 文档 的 可 编辑 区 ， 文 档 的 锁定 区 是 不 允许 修改 的 。 

定义 新 的 可 编辑 区 域 的 具体 步骤 如 下 。 

打开 随 书 光 盘 中 的 “ch09\Templates\ 模 板 .4wt” 文 件 ， 如 图 9-10 所 示 。 

ECDRD 将 光标 放置 在 要 插入 可 编辑 区 域 的 位 置 ， 选 择 【 插 入 】 一 【模板 对 象 】 一 【可 

编辑 区 域 】 菜 单 命令 ， 如 图 9-11 所 示 。 


说 明 


请 注意 ， 这 些 布局 的 CSS 带 有 大 全 注释 。 如 蛙 您 的 大 部 分 工 
作 都 在 设计 视图 中 央行 请 快 超 罚 览 一 下 代码 ， 获 取 有 关 如 何 
合用 液态 市 局 CSS 的 提示 。 您 可 以 先 册 仁 这 些 注释 ,然后 局 
动 您 的 站 点 。 要 了 解 有 关 这 些 CSS 布局 中 使 用 的 方法 的 更 多 
信息 ， 请 同 读 Adobe 开发 人 员 中 心 上 的 以 下 文章 

+ http://www.adobe.com/go/adc css layvouts. 


jb 


清除 方法 


ee Se 
9-10 ”打开 素材 文件 图 9-11 选择 【可 编辑 区 域 】 菜 单 命令 


全 i156 


EEJep 弹出 【新 建 可 编辑 区 域 】 对 话 框 ， 在 【名 称 】 文 本 框 中 输入 名 称 ， 如 图 9-12 
所 示 。 


em 命名 一 个 可 编辑 区 域 时 ， 不 能 使 用 单 引号 ()、 双 引号 (")、 尖 括号 (<>)、& 等 。 
\ 


EEC) 单 击 【 确 定 】 按 钮 即 可 插入 可 编辑 区 域 。 在 模板 中 ， 可 编辑 区 域 会 被 突出 显 
示 ， 如 图 9-13 所 示 。 


Dw [ES se seM wD wav 
TN culeN 
下 是 新 建 汽 休 网 格局 


re] ooe mma. eea 
此 区 类 各 以 在 区 于 法 大 板 的 文档 2 3 ar ranhra 
中 泛 行 统 。 99 CoultW 
WD) Col+Shik+W 
na i 
FA- Col+Shit+s 
图 9-12 【新 建 可 编辑 区 域 】 对 话 框 9-13 可 编辑 区 域 9-14 选择 【保存 】 菜 单 命令 


9.2 管理 模板 


模板 创建 好 后 ， 根 据 实际 需要 可 以 随时 更 改 模板 样式 、 内 容 。 更 新 过 模板 后 ， 
Dreamweaver 会 同时 更 新 应 用 该 模板 的 所 有 网 页 。 


9.2.1 案例 5 一 一 从 模板 中 分 离 


利用 从 模板 中 分 离 功 能 ， 可 以 将 文档 从 模板 中 分 离 ， 分 离 后 ， 模 板 中 的 内 容 依然 存在 。 
文档 从 模板 中 分 离 后 ， 文 档 的 不 可 编辑 区 域 会 变 得 可 以 编辑 ， 这 给 修改 网 页 内 容 带 来 很 大 方便 。 

从 模板 中 分 离 文档 的 具体 步骤 如 下 。 

EECDp 打开 随 书 光盘 中 的 “ch09\ 模 板 .html” 文 件 ， 由 图 9-15 可 以 看 出 页 面 处 于 不 可 编 
辑 状 态 。 

ED 选择 【修改 】 一 【模板 】 一 【从 模板 中 分 离 】 菜 单 命令 ， 如 图 9-16 所 示 。 

EEC) 选择 命令 后 ， 即 可 将 网 页 从 模板 中 分 离 出 来 ， 此 时 即 可 重新 设置 图 像 路 径 ， 如 
图 9-17 所 示 。 

EC 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 9-18 所 示 。 


营 菏 于 家 一 忆 习 下 | 汶 亲 双 广 址 肿 尖 由 6 游 上 后 
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说 明 
请 汪 莫 ， 这 些 市 局 的 CSS 帝 有 大 量 注 释 。 如果 您 的 大 部 分 工 
作 都 在 设计 视图 中 进行 ， 请 快运 济 筑 一 下 代码 ， 获 职 有 基因 何 
使 用 廊坊 布局 CSS 的 所 示 您 可 以 先 帆 除 这 些 广 释然 后 让 
动 不 的 站 点 ,要 了 解 有 关 这 些 CSS 布局 中 司 届 的 方法 的 更 地 
信息 ， 请 阅读 Adobe 开 喜人 员 中 心 上 的 以 下 文章 


9-15 ”打开 素材 文件 


CE Te or 


i Ne Css FI 

四 

和 

敬 人 用 证 忆 CS5 本 和， 全 后 

请 注 世 ， 这 此 布局 的 CSS 大 有 大 量 广 可。 如 具 世 的 大 于 分 工 A en fap no 
计 入 E， 证 有 大 量 广 可- A 
作 部 在 说 计 视 田中 进行 请 全 过 汉 史 一 丰 忆 到， 革 了 有关 如 何 ben/ome wiebe conyoolade cu ini 


便 用 液态 布局 C5S 的 提示 。 您 可 以 先 秽 院 这 些 和 注释， 芍 后 局 清除 方法 
动 儿 的 沾 点 。 村 了 解 有 关 这 些 CSS 市 局 中 使 用 的 方 流风 艳 多 


天 有 并， 国 此 ， 尼 布 呈 丰 foohtr 可 出 所 有 用 
阅读 Adobe 开发 全 中 心 上 mr 


天 有 
清除 方法 - os /> or dh 
; os carfoatry </iv>， 全 有 采风 
Va Vo SAD A iets tr 


图 9-17 将 网 页 从 模板 中 分 离 图 9-18 ”预览 网 页 效果 


9.2.2 ”案例 6 一 一 更 新 模板 及 基于 模板 的 网 页 


用 模板 的 最 新 版 本 更 新 整个 站 点 及 应 用 特定 模板 的 所 有 文档 的 具体 步骤 如 下 。 

ET 打开 随 书 光 盘 中 的 “ch09\Templates\ 模 板 .4wt” 文 件 ， 如 图 9-19 所 示 。 

本 于 将 光标 置 于 模板 需要 修改 的 地 方 ， 并 进行 修改 ， 如 图 9-20 所 示 。 

EEIe) 选择 【文件 】 一 【保存 】 命 令 ， 即 可 保存 更 改 后 的 网 页 。 然 后 打开 应 用 该 模板 
的 网 页 文件 ， 可 以 看 到 更 新 后 的 网 页 ， 如 图 9-21 所 示 。 


多 彩 文具 


读本 过 上 证 CSS 芝 有 大 重生 站 。 吉 和 你 扩大 等 分工 


说 明 

65 和 有 大 和 .各 的 各 分工 
各 在读， 表 仙 下 到 有关 和 条 

全 CSS 的 拉 示 。 多 可 和， 个 

如 点 。 吾 外 有关 这 和 SS 中 全 的 方面 和 

全 于 Adobe 天候 中 心 上 区 CLT 


作 亲 在 设计 视图 中 流行， 沸 亿 济 昌 一 下 信友， 攻 旬 有 关 何 
合用 六 二 布 局 CSS 的 扩 趟 。 示 可以 先 条 队 这 此 入 各 .公司 
动人 的 站 点 。 委 了 逢 有 关 这 企 CSS 市 所 中 信用 六 方法 的 刘 
人 信息。 讲 间 洛 Adobe 开发 人 员 中 心 上 的 以下 文章 

* hittin.adobe .tomgo/adc cas_lavouts. 


清除 方法 
rr 


9-19 打开 素材 文件 图 9-20 ”修改 模板 图 9-21 预览 网 页 效果 


9.3 ”实战 演练 一 一 创建 基于 模板 的 页 面 


模板 制作 完成 ， 接 下 来 可 以 将 其 应 用 到 网 页 中 。 建 立 站 点 my site， 并 将 光盘 中 的 “ 源 代 
码 \ch09\” 设 置 为 站 点 根 目录 ， 通 过 使 用 模板 ， 能 快速 、 高 效 地 设计 出 风格 一 致 的 网 页 。 

本 实例 的 具体 操作 步骤 如 下 。 

EC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建文 档 】 对 话 框 ， 在 【新 建文 
档 】 对 话 框 中 选择 【模板 中 的 页 】 选 项 卡 ， 在 【站 点 】 列 表 框 中 选择 【我 的 站 点 】 
选项 ， 选 择 【 站 点 “我 的 站 点 ”的 模板 】 列 表 框 中 的 模板 文件 “模版 1”， 如 图 9-22 
所 示 。 

EECRUP9 单 击 【 创 建 】 按 钮 ， 创 建 一 个 基于 模板 的 网 页 文档 ， 如 图 9-23 所 示 。 


藻 蘑 也 党 一 潭 加 下 | 癌 喜 双 二 类 好 注 由 6 站 是 


这 二 这 此 局 的 《SS 大 有 大 量 往 称 。 如 时 的 大 部 工 
作 都 在 仙 计 检 困 中 击 行 ， 户 至 济 区 一 下 代码 ， 区 村 有 头 如 何 
候 可 以 兴 出 了 过 直 往 各 然后 局 

此 CSS 布局 中 便 用 的 方 守 的 更 杀 


again 


[mL ME CM -eno 


图 9-22 【新 建文 档 】 对 话 框 9-23 ”创建 基于 模板 的 网 页 


EB 将 光标 放置 在 可 编辑 区 域 中 ， 选 择 【 插 入 】 一 【表格 】 菜 单 命令 ,弹出 【 表 
格 】 对 话 框 ， 将 【 行 数 】 和 【 列 】 都 设置 为 1，【 表 格 宽度 】 设 置 为 95%，【 边 框 
粗细 】 设 置 为 0，【 单 元 格 边 距 】 和 【单元 格 间距 】 均 设置 为 0， 如 图 9-24 所 示 。 

EC 单 击 【 确 定 】 按 钮 插入 表格 。 在 【属性 】 面 板 中 ， 将 【对 齐 】 设 置 为 【居中 对 
齐 】， 如 图 9-25 所 示 。 


9-24 【表格 】 对 话 框 图 9-25 插入 表格 


辐 。 网 页 设计 与 网 站 建设 
案例 课堂 四 一 


EDD) 将 光标 放置 在 表格 中 ， 和 输入 文字 和 图 像 ， 并 设置 文字 和 图 像 的 对 齐 方式 ， 如 
图 9-26 所 示 。 

ET 选择 【文件 】 一 【保存 】 菜 单 命令 ， 打 开 【 另 存 为 】 对 话 框 ， 在 【文件 名 】 下 
拉 列 表 框 中 输入 index， 单 击 【 保 存 】 按 钮 ， 如 图 9-27 所 示 。 

ET 接 F12 键 在 浏览 器 中 预览 效果 ， 如 图 9-28 所 示 。 


ED 三 GTE 必 -站 | sr 
坟 广 有 具 催 ， 和 年 本 ， 居 力克 年 才 你 尘 1 人 元 的 ”| 归 


NW 


图 9-28 ”预览 网 页 效果 


9.4” 跟 我 练 练 手 
9.4.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
9.4.2 上 机 练习 
练习 1: 使 用 各 种 方法 创建 模板 。 


练习 2: 管理 模板 。 
练习 3: 创建 基于 模板 的 页 面 。 


全 i00 


9.5 高 手 甜 点 


甜点 1: 处 理 不 可 编辑 的 模板 
为 了 避免 编辑 时 误 操 作 而 导致 模板 中 的 元 素 变化 ， 模 板 中 的 内 容 默 认为 不 可 编辑 状态 。 
只 有 把 某 个 区 域 或 者 某 段 文本 设置 为 可 编辑 状态 之 后 ， 在 由 该 模板 创建 的 文档 中 才 可 以 改变 
这 个 区 域 。 具 体操 作 步 又 如 下 。 
EEC 先 用 鼠标 选取 需要 编辑 的 某 个 区 域 ， 然 后 选择 【修改 】 一 【模板 】 一 【 令 属 性 
可 编辑 】 命 令 ， 如 图 9-29 所 示 。 
EEC 在 弹出 的 对 话 框 中 勾 选 【 令 属 性 可 编辑 】 复 选 框 ， 单 击 【确定 】 按 钮 ， 如 图 9-30 
所 示 。 


各 插 北村 生 的 二 吾 大作 应 是 可 妨 台 的 。 
后 全 [三 日 E:T 
四 他 所 人 可 损 名 


标 答 : 
类 型 :文本 =- 
到 人 

车 要 基于 此 模板 在 页 中 更 改 此 局 性 的 值 ， 
稍 千 择 ,修改 > 很 板书 性 

要 更 芍 法 局 性 是 否 可 注 轩 ,请 再 次 使 用 "使 
轴 人 可 沪 畦 -全 会。 


图 9-29 选择 【 令 属性 可 编辑 】 菜 单 命令 图 9-30 勾 选 【 令 属性 可 编辑 】 复 选 框 
甜点 2: 模板 使 用 技巧 


使 用 模板 可 以 为 网 站 的 更 新 和 维护 提供 极 大 的 方便 ， 仅 修改 网 站 的 模板 即 可 完成 对 整个 
网 站 中 页 面 的 统一 修改 。 模 板 的 使 用 难点 是 如 何 合理 地 设置 和 定义 模板 的 可 编辑 区 域 。 要 想 
把 握 好 这 一 点 ， 在 定义 模板 的 可 编辑 区 域 时 ， 一 定 要 仔细 地 研究 整个 网 站 中 各 个 页 面 所 具有 
的 共同 风格 和 特性 ， 只 有 这 样 ， 才 能 设计 出 适合 网 站 使 用 的 合理 模板 。 使 用 库 项 目 可 以 完成 
对 网 站 中 某 个 板块 的 修改 。 利 用 这 些 功能 不 仅 可 以 提高 工作 的 效率 ， 而 且 可 以 使 网 站 的 更 新 
和 维护 等 烦琐 的 工作 变 得 更 加 轻松 。 


菏 闹 性 户 一 一 凡 习 否 | 癌 训 习 证 盐 芭 童 贡 6 波 
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制作 动态 网 站 基础 一 一 构建 动态 网 站 的 运 
行 环境 

架 起 动态 网 站 的 桥梁 一 一 定义 动态 网 站 与 
使 用 MySQL 数据 库 

开启 动态 网 站 制作 之 路 一 一 动态 网 站 应 用 
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网 页 设计 与 网 站 建设 
案例 课堂 ~ 


10.1 准备 互动 网 页 的 执行 环境 
在 创建 动态 网 站 之 前 ， 用 户 需 要 准备 互动 网 页 的 执行 环境 。 
10.1.1 什么 是 PHP 


PHP(Personal Home Page， 目 前 已 经 更 名 为 PHP:Hypertext Preprocessor) 与 ASP 相同 ， 是 
一 种 内 能 于 HTML 文件 中 的 程序 代码 语言 。PHP 程序 可 以 根据 不 同 的 状态 输出 不 同 的 网 页 内 
容 ， 是 一 种 快速 流行 且 功能 强大 的 网 页 编程 语言 。 我 们 选择 使 用 PHP 程序 来 开发 网 站 的 原 
因 如 下 。 

@ PHP 可 以 在 Linux 与 Windows 的 环境 下 执行 ， 搭 配 这 两 个 操作 系统 中 的 服务 器 软 

件 ， 如 Apache 或 PWS、HS， 能 让 您 所 开发 出 来 的 程序 轻易 地 跨越 两 个 平台 来 执 
行 ， 无 须 改写 。 

@ PHP 所 使 用 的 执行 环境 ， 无 论 在 软 硬 件 的 投资 成 本 都 相当 低廉 ， 但 是 所 开发 的 程序 

功能 却 相当 强大 而 完整 ， 可 以 明显 提升 企业 的 竞争 力 。 

@ PHP 所 使 用 的 语法 相当 的 简单 易 懂 ， 若 用 户 已 经 有 其 他 程序 语言 的 基础 ， 如 ASP， 

可 以 很 轻松 地 跨 入 PHP 程序 设计 的 领域 。 


10.1.2 执行 PHP 的 程序 


PHP 程序 必须 要 在 支持 PHP 的 网 站 服务 器 上 才能 操作 ， 用 户 不 能 直接 选择 网 页 来 执行 浏 
览 。 所 以 在 执行 PHP 程序 之 前 ， 必 须 拥有 一 个 服务 器 空间 。 

下 面 介绍 两 种 不 同 的 网 站 服务 器 (IIS 与 Apache) 的 安装 与 设置 ， 并 搭配 PHP 安装 程序 ， 
让 两 种 网 站 服务 器 都 有 执行 PHP 程序 的 能 力 。 

另外 ， 在 Dreamweaver CS6 中 ，PHP 的 程序 必须 搭配 MySQL 的 数据 库 来 制作 互动 网 
页 。 建 议 用 户 在 安装 完 网 站 服务 器 后 再 安装 MySQL 数据 库 ， 这 样 无 论 用 户 采 取 何 种 服务 器 
环境 都 不 会 影响 MySQL 数据 库 的 执行 。 


10.2 架设 1IS+PHP 的 执行 环境 
本 节 主 要 讲述 IS+PHP 的 执行 环境 配置 方法 。 
10.2.1 案例 1 一 一 IIS 网 站 服务 器 的 安装 与 设置 


1. 安装 IIS 网 站 服务 器 


在 Windows 7 中 ， 默 认 已 经 安装 好 了 Microsoft Internet 信息 服务 (IS)， 用 户 只 需要 启动 
该 服务 即 可 ， 有 具体 操作 步骤 如 下 。 


EEC 单 击 【开始 】 按 钮 ， 在 弹出 的 列表 中 选择 【控制 面板 】 选 项 ， 如 图 10-1 所 示 。 
EEIPp 打开 【控制 面板 】 窗 口 ， 选 择 【程序 】 选 项 ， 如 图 10-2 所 示 。 


pm 2 slialu 
10-1 【控制 面板 】 选 项 图 10-2 选择 【程序 】 选 项 


EEIe 打开 【控制 面板 \ 程 序 】 窗 口 ， 选 择 【 打 开 或 关闭 Windows 功能 】 选 项 ， 如 
图 10-3 所 示 。 

四 YY 打开 【Windows 功能 】 窗 口 ， 展 开 【Intemet 信息 服务 】 选 项 ， 勾 选 【Web 管理 
工具 】 和 【万 维 网 服务 】 复 选 框 ， 然 后 单 击 【 确 定 】 按 钮 即 可 启动 IS 网 站 服务 
器 ， 如 图 10-4 所 示 。 

EEIpy 测试 IS 网 站 服务 器 是 否 安装 成 功 。 打 开 下 浏览 器 ， 在 网 址 栏 中 输入 
http://localhost/， 运 行 后 效果 如 图 10-5 所 示 ， 说 明 IIS 成 功 安装 了 。 
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2. 设置 IIS 网 站 服务 器 


如 果 用 户 按照 前 述 的 方式 来 启动 IS 网 站 服务 器 ， 目 前 整个 网 站 服务 器 的 根 目录 就 位 于 
“系统 盘 符 :Imetpubvwwwroot” 中 ， 也 就 是 说 ， 如 果 要 添加 网 页 到 网 站 中 显示 ， 必 须 把 网 页 放 
置 在 这 个 目录 之 下 。 

上 述 系 统 默认 的 存放 路 径 比较 长 ， 使 用 起 来 相当 不 方便 ， 下 面 介 绍 更 改 网 站 虚拟 目录 的 
方法 。 这 里 将 网 站 的 虚拟 目录 放置 在 C:\dwphp 文件 夹 中 ， 具 体操 作 步 骤 如 下 。 

EEIDp 右 击 桌面 上 的 【计算 机 】 图 标 ， 在 弹出 的 快捷 菜单 中 选择 【管理 】 命 令 ， 如 
图 10-6 所 示 。 

EEJDp 打开 【计算 机 管理 】 窗 口 ， 选 择 【Intemet 信息 服务 】 一 【网 站 】 一 Default Web 

Site 选项 ， 右 击 并 在 弹出 的 快捷 菜单 中 选择 【添加 虚拟 目录 】 命 令 ， 如 图 10-7 所 示 。 


10-6 选择 【管理 】 命 令 10-7 ”添加 虚拟 目录 


国 于 BY 打开 【添加 虚拟 目录 】 对 话 框 ， 在 【别名 】 文 本 框 中 输入 虚拟 网 站 的 名 称 ， 这 
里 输入 dwphp， 然 后 选择 物理 路 径 为 Cdwphp， 如 图 10-8 所 示 。 
EEC 单 击 【 确 定 】 按 钮 ， 即 完成 了 IIS 网 站 服务 器 设置 的 更 改 ，IIS 网 站 服务 器 的 网 
站 虚拟 目录 已 经 更 改 为 C:\dwphp 了 。 
不 过 ， 这 里 还 需要 实际 制作 一 个 简单 网 页 ， 测 试 一 下 放置 在 刚才 所 更 改 的 虚拟 目录 里 的 
网 页 是 否 能 够 被 浏览 器 预览 ， 具 体操 作 步 又 如 下 。 
EEIDp 选择 【开始 】 一 【所 有 程序 】 一 【附件 】 一 【记事 本 】 选 项 ， 打 开 【 记 事 本 】 
窗口 ， 在 其 中 输入 相关 代码 ， 如 图 10-9 所 示 。 
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图 10-8 【添加 虚拟 目录 】 对 话 框 图 10-9 【记事 本 】 窗 口 
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EC 选择 【文件 】 一 【保存 】 菜 单 命令 ， 从 而 保存 这 个 网 页 。 将 这 个 文件 命名 为 
index.html， 而 保存 的 位 置 就 是 Cdwphp， 如 图 10-10 所 示 。 

打开 浏览 器 ， 输 入 本 机 网 址 及 添加 的 网 页 名 称 http://localhost/dwphp/index.html， 
运行 效果 如 图 10-11 所 示 。 


10-10 【另存 为 】 对 话 框 10-11 网 页 测试 效果 


划 当 村 党 否 导 习 二 直 由 首 一 主导 革 司 二 直 信 坦 刷 01 小 


10.2.2 ”案例 2 一 一 在 IIS 网 站 服务 器 上 安装 PHP 


IIS 网 站 服务 器 的 安装 与 设置 都 完成 后 ， 下 面 就 可 以 安装 PHP 软件 了 ， 用 户 可 以 通过 网 
址 http:/www.php.net/downloads.php 获取 PHP 软件 。 下 面 以 下 载 的 php-5.3.17-Win32-VC9- 
x86.msi 为 例 来 讲解 安装 的 方法 。 


1. PHP 的 安装 


运行 php-5.3.17-Win32-VC9-x86.msi， 开 始 在 IIS 网 站 服务 器 上 安装 PHP， 具 体操 作 步 又 
如 下 。 
EEDp 双击 安装 程序 ， 进 入 欢迎 界面 ， 单 击 Next 按钮 开始 安装 ， 如 图 10-12 所 示 。 
EEJ2p 打开 版 权 说 明 界面 ， 阅 读 完 版 权 说 明 后 勾 选 I accept the terms in the License 
Agreement 复 选 框 ， 单 击 Next 按钮 继续 安装 ， 如 图 10-13 所 示 。 


Wolcome tn tre PHP 53.17 Sehp Wd 


图 10-12 欢迎 界面 图 10-13 版权 说 明 界面 


打开 PHP 安装 路 径 设 置 界面 ， 在 其 中 可 以 根据 实际 需要 设置 PHP 安装 路 径 ， 然 
后 单 击 OK 按钮 ， 如 图 10-14 所 示 。 

EC 打开 服务 器 安装 界面 ， 选 择 IS CGI 为 本 机 所 使 用 的 网 站 服务 器 ， 单 击 Next 按 
钮 ， 如 图 10-15 所 示 。 
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10-14 ”安装 路 径 设置 界面 10-15 ”选择 要 安装 的 服务 器 


EEJD 打开 准备 安装 界面 ， 单 击 Install 按钮 ， 如 图 10-16 所 示 。 

ED 安装 完成 后 ， 单 击 Finish 按钮 ， 如 图 10-17 所 示 。 

ES 打开 IIS， 单 击 【Web 服务 扩展 】 选 项 ， 选 择 【 所 有 未 知 CGI 扩展 】 选 项 ， 然 后 
单 击 【 人 允许 】 按 钮 ， 如 图 10-18 所 示 。 
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10-16 ”准备 安装 界面 10-17 ”完成 安装 界面 10-18 ”扩展 Web 服务 器 
2. 测试 PHP 在 IIS 网 站 服务 器 上 的 执行 


PHP 安装 完成 后 ， 即 可 进行 测试 操作 ， 检 测 是 否 安装 成 功 ， 具 体操 作 步 又 如 下 。 

EEIDp 选择 【开始 】 一 【所 有 程序 】 一 【附件 】 一 【记事 本 】 选 项 ， 打 开 【 记 事 本 】 
窗口 ， 在 其 中 输入 PHP 程序 ， 如 图 10-19 所 示 。 

EEIDy 选择 【文件 】 一 【保存 】 菜 单 命令 来 保存 这 个 网 页 ， 将 文件 命名 为 index.php， 
而 保存 的 位 置 就 是 C:\dwphp， 如 图 10-20 所 示 。 

Eue) 打开 浏览 器 ， 输 入 本 机 网 址 及 添加 的 网 页 名 称 http://localhost/index.php。 浏 览 器 
能 够 正确 显示 刚刚 完成 的 网 页 ， 并 显示 该 网 站 目前 的 PHP 相关 信息 ， 说 明 安 装 成 
功 ， 如 图 10-21 所 示 。 
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图 10-19 【记事 本 】 窗口 图 10-20 【另存 为 】 对 话 框 图 10-21 测试 网 页 结果 
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10.3 架设 Apache+PHP 的 执行 环境 
本 节 主 要 讲述 Apache+PHP 执行 环境 的 搭建 方法 。 


10.3.1 案例 3 一 -Apache 网 站 服务 器 的 安装 与 设置 


Apache 网 站 服务 器 是 一 个 免费 的 软件 ， 用 户 可 以 通过 网 址 http://httpd.apache.org/ 获 取 该 
软件 ， 下 面 以 安装 与 配置 httpd-2.2.22-win32-x86-no_ssl.msi 为 例 来 讲解 架设 Apache+PHP 执行 
环境 的 方法 。 

1. 关闭 原 有 的 网 站 服务 器 


在 安装 Apache 网 站 服务 器 之 前 ， 如 果 所 使 用 的 操作 系统 已 经 安装 了 网 站 服务 器 ， 如 IIS 
网 站 服务 器 等 ， 用 户 必须 要 先 停止 这 些 服务 器 ， 才 能 正确 安装 Apache 网 站 服务 器 。 
以 Windows 7 操作 系统 为 例 ， 关 闭 原 有 网 站 服务 器 的 操作 步骤 如 下 。 


EEC 右 击 桌面 上 的 【计算 机 】 图 标 ， 在 弹出 的 快捷 菜单 中 选择 【管理 】 命 令 ， 如 上 


项 浊 村 党 否 民 习 寺 起 隐 着 一 一 宇 导 避 习 二 起 证 班机 01 由 


10-22 所 示 。 

EDp 打开 【计算 机 管理 】 窗 口 ， 选 择 【Internet 信息 服务 (IIS)】 一 【网 站 】 一 【默认 
的 网 站 】 选 项 ， 然 后 在 【操作 】 窗 格 中 单 击 【 停 止 】 按 钮 ， 即 可 关闭 原 有 的 网 站 服 
务 器 ， 如 图 10-23 所 示 。 


10-22 ”选择 【管理 】 命 令 10-23 【计算 机 管理 】 窗 口 
2. 安装 Apache 网 站 服务 器 
这 里 以 httpd-2.2.22-win32-x86-no_ssl.msi 为 例 来 介绍 安装 Apache 网 站 服务 器 的 方法 ， 具 
体操 作 步 又 如 下 。 
ED 双击 安装 程序 ， 进 入 欢迎 界面 ， 单 击 Next 按钮 开始 安装 ， 如 图 10-24 所 示 。 
打开 版 权 说 明 界 面 ， 在 其 中 选中 Iaccept the terms in the license agreement 单 选 按 
钮 ， 单 击 Next 按钮 ， 如 图 10-25 所 示 。 
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图 10-24 ”欢迎 界面 图 10-25 版 权 说 阴 界 面 

ETE> 打开 许可 证 协议 说 明 界面 ， 单 击 Next 按钮 继续 安装 ， 如 图 10-26 所 示 。 

EGG 打开 服务 器 设置 界面 ， 设 置 本 机 的 网 域名 称 及 主机 名 称 ， 若 只 在 本 机 测试 ， 都 输入 
localhost; 设置 用 户 的 电子 邮件 ， 以 便 联系 ， 设 置 可 操作 用 户 ， 建 议 选中 如 图 10-27 
所 示 的 单 选 按钮 ， 让 本 机 用 户 缘 可 操作 ， 最 后 单 击 Next 按钮 继续 安装 。 
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10-26 许可 证 协议 说 明 界 面 10-27 ”服务 器 设置 界面 

EEIDp 打开 选择 安装 类 型 界面 ， 这 里 选择 Typical 一 般 安装 模式 ， 单 击 Next 按钮 继续 
安装 ， 如 图 10-28 所 示 。 

EEC 打开 软件 安装 路 径 设 置 界面 ， 这 里 将 安装 路 径 更 改 为 C\Apache2.2\， 单 击 Next 
按钮 继续 安装 ， 如 图 10-29 所 示 。 
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图 10-28 选择 安装 类 型 界面 图 10-29 更 改 软件 安装 路 径 


Emo 到 此 所 有 安装 的 选项 都 已 设置 完成 ， 单 击 Install 按钮 开始 安装 ， 如 图 10-30 
所 示 。 
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ED 所 有 的 安装 操作 完成 后 ， 单 击 Finish 按钮 结束 安装 ， 如 图 10-31 所 示 。 E 
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图 10-30 开始 安装 图 10-31 安装 完成 3 

态 

ET 安装 完毕 之 后 ，Apache 网 站 服务 器 也 随 之 被 启动 ， 在 桌面 下 角 的 工作 栏 中 会 多 
出 现 Apache 网 站 服务 器 图 标 ， 即 表示 目前 Apache 网 站 服务 器 已 启动 ， 如 图 10-32 六 NN 
所 示 。 此 NN 
EE 区 0D 打开 浏览 器 ， 在 网 址 栏 中 输入 http://localhost/， 如 果 出 现 如 图 10-33 所 示 的 浏览 琉 NN 


3. 设置 Apache 网 站 服务 器 


如 果 用 户 按 照 前 述 的 方式 来 安装 Apache 网 站 服务 器 ， 目 前 整个 网 站 服务 器 的 根 目录 就 位 
于 C:\Apache2.2 中 ， 也 就 是 说 ， 如 果 要 添加 网 页 到 网 站 中 显示 ， 则 网 页 都 必须 放置 在 这 个 目 
录 之 下 。 


器 页 面 信息 ， 即 表示 Apache 网 站 服务 器 已 经 安装 成 功 且 执行 正常 。 S 


CE 


| 
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It works! ] 


加 
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图 10-32 启动 图 标 图 10-33 浏览 器 页 面 
如 果 用 户 不 愿意 使 用 默认 的 路 径 ， 可 以 将 其 更 改 。 不 过 更 改 之 前 ， 必 须要 先 打开 
httpd.conf 文件 ， 在 该 文件 中 进行 修改 ， 有 具体 操作 步骤 如 下 。 

ED 选择 【开始 】 一 【所 有 程序 】 一 Apache HTTP Server 2.2 一 Configure Apache 
Server 一 Edit the Apache httpd.conf Configuration File 选项 ， 如 图 10-34 所 示 。 

EEC 打开 httpd.conf 文件 ， 选 择 【 编 辑 】 一 【查找 】 菜 单 命令 ， 如 图 10-35 所 示 。 

EEJe) 打开 【查找 】 对 话 框 ， 输入 DocumentRoot 后 单 击 【 查 找 下 一 个 】 按 钮 来 查找 要 
修改 的 设置 字 串 ， 如 图 10-36 所 示 。 

EC 在 设置 文件 中 是 以 “DocumentRoot" 文 件 夹 路 径 "” 的 方式 来 设置 网 站 根 目录 
的 ， 如 图 10-37 所 示 为 目前 的 设置 。 
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10-34 打开 httpd.conf 文件 图 10-35 选择 【查找 】 菜 单 命令 


加 | 
坦 敌 内 可 0 [octRod ，，，，，，， 雪 拓 FT- 个 中 | 


本 -一 一 一 一 | 取消 
厂 区 大 4 | 个 向 ED 向 Fo 


10-36 【查找 】 对 话 框 


# DocunentRoot: The directory out of which you will serve your 
# docunents. By default, all requests are taken from this directory, but 
# Symbolic links and aliases may be used to point to other locations. 


图 10-37 系统 默认 路 径 
区 于 BY 把 软件 默认 的 路 径 修改 为 想 要 更 改 的 路 径 ， 如 图 10-38 所 示 。 


DocumentRoot "C:/Apache2.2/htdocs" 


# DocunentNoot: Ihe directory out of which you wll serve your 
# docunents. By default, all requests are taken from this directory, but 
# synbolic links and aliases nay be used to point to other locations. 


DocunentRoot “C:/Apache2.2/htdocs™ 


10-38 更改 文 件 的 路 径 


EECD 设置 完毕 之 后 ， 保 存 并 关闭 httpd.conf 文件 。 然 后 选择 【开始 】 一 【所 有 程序 】 一 
Apache HTTP Server 2.2 一 Control Apache Server 一 Restart 选项 ， 重 新 启动 Apache 网 
站 服务 器 ， 这 样 更 改 的 路 径 才 能 生效 ， 如 图 10-39 所 示 。 

如 此 一 来 Apache 网 站 服务 器 的 网 站 根 目录 已 经 更 改 为 C:\Apache2.2\htdocs 了 。 在 这 里 还 
需要 实际 制作 一 个 简单 网 页 ， 放 置 在 刚才 所 更 改 的 网 页 根 目录 里 ， 测 试 其 能 否 被 浏览 器 正常 
打开 ， 具 体操 作 步 又 如 下 。 

EC 选择 【开始 】 一 【所 有 程序 】 一 【附件 】 一 【记事 本 】 选 项 ， 打 开 【 记 事 本 】 

窗口 ， 在 其 中 输入 网 页 代码 ， 如 图 10-40 所 示 。 

EEP 选择 【文件 】 一 【保存 文件 】 菜 单 命令 ， 将 文本 保存 为 网 页 格式 ， 如 index.html， 
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保存 的 位 置 为 新 设置 的 路 径 C:\Apache2.2\htdocs, 如 图 10-41 所 示 。 a 
eke 本 章 
en 制 

和 着 EE lx 作 
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10-41 【另存 为 】 对 话 框 


本 于 BY 打开 浏览 器 ， 输 入 本 机 网 址 及 添加 的 网 页 名 称 http://localhost/index.html。 运 行 结 
果 如 图 10-42 所 示 ， 表 示 浏览 器 能 够 正确 地 显示 网 页 。 


EE ol 
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习 


Da = 
上 文件 四。 搞 站 下， 二 在 0 委 要 大 0) 工具) 到 的 00 
这 是 一 个 服务 器 的 测试 软件 


10-42 ”网 页 预览 结果 


10.3.2 ”案例 4 一 一 在 Apache 网 站 服务 器 上 安装 PHP 


Apache 网 站 服务 器 的 安装 与 设置 都 完成 后 ， 下 面 就 可 以 安装 PHP 软件 了 。 

1. PHP 的 安装 

运行 php-5.3.17-Win32-VC9-x86.msi， 开 始 在 Apache 网 站 服务 器 上 安装 PHP， 有 具体 操作 
步骤 如 下 。 

EEC 双击 安装 文件 ， 进 入 欢迎 界面 ， 单 击 Next 按钮 开始 安装 ， 如 图 10-43 所 示 。 

ES 打开 版 权 说 明 界 面 ， 阅 读 完 版 权 说 明 后 勾 选 TI accept the terms in the License 


外 
75@ 


网 页 设计 与 网 站 建设 
案例 课堂 ~ 


Agreement 复 选 框 ， 单 击 Next 按钮 继续 安装 ， 如 图 10-44 所 示 。 


lac te me eborse goeret 


Le we ml er | 
图 10-43 ”欢迎 界面 图 10-44 版权 说 明 界 面 
EEJRe 打开 PHP 安装 路 径 设置 界面 ， 设 置 PHP 安装 路 径 ， 单 击 Next 按钮 ， 如 图 10-45 


所 示 。 
EC 打开 服务 器 安装 界面 ， 选 择 Apache 2.2.x Module 为 本 机 所 使 用 的 网 站 服务 器 ， 
即 选中 Apache 2.2.x Module 单 选 按钮 ， 单 击 Next 按钮 ， 如 图 10-46 所 示 。 
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10-45 ”安装 路 径 设置 界面 图 10-46 选择 服务 器 类 型 
ET 在 打开 的 界面 中 选择 Apache 配置 文件 所 在 目录 ， 然 后 单 击 Next 按钮 ， 如 图 10-47 
所 示 。 


EEC 在 打开 的 界面 中 选择 需要 安装 的 功能 模块 ， 这 里 采用 默认 的 设置 ， 单 击 Next 按 
钮 ， 如 图 10-48 所 示 。 
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10-47 选择 Apache 配置 文件 所 在 目录 图 10-48 选择 需要 安装 的 功能 模块 


售 176 


打开 准备 安装 界面 ， 单 击 Install 按钮 ， 如 图 10-49 所 示 。 
安装 完成 后 ， 单 击 Finish 按钮 ， 如 图 10-50 所 示 。 


Ready to install pp 5.3.17 Completed the PHP 5.3.17 Setup Wizard 
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10-49 ”准备 安装 PHP 10-50 ”完成 安装 
2. 重启 Apache 服务 器 


安装 完 PHP 之 后 ， 还 需要 重新 启动 Apache 服务 器 ， 具 体操 作 步 又 如 下 。 
ED 选择 【开始 】 一 Apache HTTP Server 2.2 一 Configure Apache Server 一 Edit 
the Apache httpd.conf Configuration File 选项 ， 打 开 配 置 文件 ， 在 配置 文件 末尾 已 经 
加 上 相应 配置 信息 ， 如 图 10-51 所 示 。 
HBEGIN PHP INSTRLLER EDITS - REMOUE ONLY ON UNINSTALL 
PHPIniDir "“C:\PHP\" 


LoadModule php5_module “CG:\PHP\php5apache2 2.d11" 
HEND PHP INSTALLER EDITS - REMOUE ONLY ON UNINSTALL 


10-51 配置 文件 信息 


关闭 该 配置 文件 ， 然 后 选择 【开始 】 一 Apache HTTP Server 2.0.52 一 Control 
Apache Server 一 Restart 选项 ， 重 新 启动 Apache 服务 器 。 


3. 测试 PHP 在 Apache 网 站 服务 器 上 的 执行 


这 里 需要 实际 制作 一 个 简单 的 PHP 网 页 ， 放 置 在 网 页 根 目 录 里 ， 测 试 Apache 网 站 服务 
器 是 否 已 经 可 以 正确 解读 PHP 程序 ， 具 体操 作 步 骤 如 下 。 

EEIDp 选择 【开始 】 一 【所 有 程序 】 一 【附件 】 一 【记事 本 】 选 项 ， 打 开 【 记 事 本 】 
窗口 ， 在 其 中 输入 相应 的 代码 ， 如 图 10-52 所 示 。 

ES 选择 【文件 】 一 【保存 文件 】 菜 单 命令 ,将 该 文件 保存 为 网 页 ， 并 命名 为 
index.php， 保 存 的 位 置 为 C:\apache\htdocs， 如 图 10-53 所 示 。 

ES 打开 浏览 器 ， 输 入 本 机 网 址 及 添加 的 网 页 名 称 http://localhost/index.php， 运 行 结 
果 如 图 10-54 所 示 。 可 以 看 出 浏览 器 能 够 正确 地 显示 刚刚 完成 的 网 页 ， 并 显示 该 网 
站 目前 的 PHP 相关 信息 。 
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10-52 【记事 本 】 窗 口 图 10-53 【另存 为 】 对 话 框 10-54 ”预览 效果 


10.4 ”MySQL 数据 库 的 安装 


设置 好 网 站 服务 器 之 后 ， 下 面 还 需要 安装 MySQL 数据 库 。MySQL 不 仅 是 一 套 功能 强 
大 、 使 用 方便 的 数据 库 ， 更 可 以 跨越 不 同 的 平台 ， 供 各 种 不 同 的 操作 系统 使 用 。 


10.4.1 案例 5 一 -MySQL 数据 库 的 安装 


用 户 可 以 通过 网 址 http://www.mysql.com/downloads/ 获 取 MySQL 数据 库 。 下 面 以 安装 
mysql-5.5.28-win32.msi 为 例 来 讲解 数据 库 的 安装 方法 ， 有 具体 操作 步骤 如 下 。 
EC 双击 下 载 好 的 安装 文件 ， 进 入 欢迎 界面 ， 单 击 Next 按钮 开始 安装 ， 如 图 10-55 
所 示 。 
打开 用 户 协议 界面 ， 勾 选 I accept the terms in the License Agreement 复 选 框 ， 单 
击 Next 按钮 继续 安装 ， 如 图 10-56 所 示 。 


ll 


Welcome to the MySQL Server 5.5 Setup 
Wizard 


amputer 
Wiese, 


WN Capwght 四 2000, 2012 Dradeardfor Fs aianes 风 
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m0 | mn | | we | 
10-55 ”欢迎 界面 10-56 ”用 户 协 议 界面 
打开 选择 安装 类 型 界面 ， 选 择 Typical 选项 后 单 击 Next 按钮 继续 安装 ， 如 图 10-57 


所 示 。 
打开 准备 安装 界面 ， 单 击 Install 按钮 继续 安装 ， 如 图 10-58 所 示 。 
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图 10-57 选择 安装 类 型 界面 图 10-58 准备 安装 界面 


ED MySQL 开始 自动 安装 ， 并 显示 安装 的 进度 ， 如 图 10-59 所 示 。 
打开 组 件 安装 界面 ， 单 击 Next 按钮 ， 如 图 10-60 所 示 。 
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10-59 ”开始 安装 10-60 ”组 件 安装 界面 


打开 MySQL 企业 服务 器 界面 ， 单 击 Next 按钮 继续 ， 如 图 10-61 所 示 。 
安装 完成 后 ， 单 击 Finish 按钮 ， 如 图 10-62 所 示 。 


Completed the MYSQL Server 5.5 Setup 
Wizard 


10-61 ”企业 服务 器 界面 10-62 ”完成 安装 


MySQL 安装 完成 后 ， 还 需要 继续 配置 服务 器 选项 ， 具 体操 作 步 又 如 下 。 

在 上 面 安装 操作 的 最 后 一 步 ， 勾 选 Launch the MySQL Instance Configuration 
Wizard 复 选 框 ， 然 后 单 击 Finish 按钮 ， 进 入 欢迎 设置 数据 库 向 导 界面 ， 单 击 Next 按 
钮 开始 设置 ， 如 图 10-63 所 示 。 

EEJD) 选中 Standard Configuration 标准 组 态 模式 后 单 击 Next 按钮 继续 ， 如 图 10-64 
所 示 。 
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图 10-63 ”欢迎 设置 数据 库 向 导 界面 图 10-64 ”选择 设置 类 型 界面 
EGRS 打开 设置 服务 器 选项 界面 ， 采 用 默认 的 设置 ， 单 击 Next 按钮 继续 ， 如 图 10-65 
所 示 。 


EC 打开 设置 安全 选项 界面 ， 输 入 root 用 户 的 密码 后 ， 单 击 Next 按钮 继续 ， 如 
图 10-66 所 示 。 


图 10-65 ”设置 服务 器 选项 界面 图 10-66 设置 安全 选项 界面 


ECGRD 打开 准备 执行 界面 ， 并 显示 执行 的 具体 内 容 ， 单 击 Execute 按钮 继续 ， 如 图 10-67 
所 示 。 

出 现 如 图 10-68 所 示 界 面 ， 表 示 组 态 文件 已 成 功 储存 ， 单 击 Finish 按钮 完成 组 态 

设置 。 


图 10-67 ”准备 执行 界面 图 10-68 配置 完成 界面 
10.4.2 ”案例 6 一 一 phpMyAdmin 的 安装 
MySQL 数据 库 的 标准 操作 界面 是 如 图 10-69 所 示 的 命令 提示 符 窗口 ， 要 通过 MySQL 指 


全 10 


令 来 管理 数据 库 内 容 。 如 果 想 要 使 用 MySQL 数据 库 ， 新 增 、 编 辑 及 删除 数据 库 的 内 容 ， 就 
必须 学 习 陌 生 的 SQL 语法 ， 背 诵 艰深 的 命令 指令 。 

难道 没有 较为 简单 的 软件 可 以 让 用 户 在 类 似 Access 的 操作 环境 下 直接 管理 MySQL 数据 
库 吗 ? 当然 有 ， 而 且 这 样 的 软件 还 不 少 ， 其 中 最 常用 的 就 是 phpMyAdmin。 


10-69 ”命令 提示 符 窗口 


phpMyAdmin 软件 是 一 套 Web 界面 的 MySQL 数据 库 管理 程序 ， 不 仅 功能 完整 、 使 用 方 
便 ， 而 且 只 要 用 户 有 适当 的 权限 ， 就 可 以 在 线 修改 数据 库 的 内 容 ， 并 能 更 安全 、 快 速 地 获得 
数据 库 中 的 数据 。 
用 户 可 以 通过 网 址 http://www.phpmyadmin.net/ 获 得 phpMyAdmin 软件 。 下 面 以 安装 
phpMyAdmin6-3.5.3-rcl-all-languages.zip 为 例 来 讲解 安装 的 方法 ， 具 体操 作 步 又 如 下 。 
EC 右 击 下 载 的 phpMyAdmin 压缩 文件 ， 在 弹出 的 快捷 菜单 中 选择 【解压 文件 】 命 
令 ， 如 图 10-70 所 示 。 
将 解压 后 的 文件 放置 到 网 站 根 目录 C:\Apache2.2\htdocs 之 下 ， 如 图 10-71 所 示 。 
打开 浏览 器 ， 在 网 址 栏 中 输入 http:WlocalhostphpMyAdmin/index.php， 运 行 结果 
如 图 10-72 所 示 ， 该 运行 结果 表示 phpMyAdmin 能 够 正确 运行 。 


phpMUAd 
欢迎 使 用 phpMyAdmin 


10-70 解压 文件 10-71 解压 后 的 文件 10-72 ” phpMyAdmin 运行 界面 


10.5 ”实战 演练 一 一 快速 安装 PHP 集成 环境 : AppServ 2.5 


动态 网 站 的 执行 环境 除了 可 以 通过 前 面 几 节 中 介绍 的 方法 进行 创建 外 ， 还 可 以 使 用 
AppServ 2.5 软件 快速 安装 PHP 集成 环境 ， 这 个 环境 也 适用 于 动态 网 站 的 运行 。 用 户 可 以 通过 
网 址 http://www.appservnetwork.com/ 获 取 AppServ 软件 。 下 面 以 安装 AppServ 2.5 为 例 进 
行 讲解 。 
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快速 安装 PHP 集成 环境 的 具体 操作 步骤 如 下 。 


EEC 双击 appserv-win32-2.5.10.exe 开始 安装 AppServ， 进 入 欢迎 界面 ， 单 击 Next 按 
钮 开始 安装 ， 如 图 10-73 所 示 。 


ET 打开 许可 协议 界面 ， 单 击 TAgree 按钮 ， 如 图 10-74 所 示 。 
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图 10-73 ”欢迎 界面 图 10-74 ”许可 协议 界面 
四 BY 打开 软件 安装 路 径 设 置 界面 ， 建 议 采 用 默认 值 ， 单 击 Next 按钮 继续 安装 ， 如 
图 10-75 所 示 。 


EEC 打开 选择 安装 组 件 界面 ， 建 议 采 用 默认 值 ， 单 击 Next 按钮 继续 安装 ， 如 图 10-76 
所 示 。 


图 10-75 选择 安装 路 径 图 10-76 选择 安装 组 件 
本 于 BY 弹出 Apache 设置 界面 ， 设 置 服务 器 的 名 称 和 用 户 的 电子 邮件 ， 单 击 Next 按钮 
继续 安装 ， 如 图 10-77 所 示 。 


打开 MySQL 设置 界面 ， 输 入 MySQL 服务 器 登录 密码 ， 单 击 Install 按钮 开始 安 
装 ， 如 图 10-78 所 示 。 


完成 软件 安装 ， 单 击 Finish 按钮 启动 Apache 及 MySQL， 如 图 10-79 所 示 。 


Completing the AppServ 2.5 10 
Setup Wizard 


mesh 可 


图 10-77 设置 服务 器 的 名 称 和 电子 邮件 ”图 10-78 输入 MySQL 登录 密码 图 10-79 安装 完成 
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软件 安装 完成 后 ， 下 面 还 需要 进行 简单 的 配置 ， 具 体操 作 步 又 如 下 。 

EC 选择 【开始 】 一 【所 有 程序 】 一 Apache HTTP Server 2.5.10 一 Configure Apache 
Server 一 Edit the Apache httpd.conf Configuration File 选项 ， 打 开 配 置 文件 。 选 择 【 编 
辑 】 一 【查找 】 菜 单 命令 ， 打 开 【 查 找 】 对 话 框 ， 输 入 DocumentRoot 后 单 击 【查找 
下 一 个 】 按 钮 来 查找 要 修改 的 字 串 。 在 设置 文件 中 将 原来 的 设置 前 加 一 个 # 号 转 为 批 
注 ， 再 增加 下 面 这 一 栏 的 设置 ， 如 图 10-80 所 示 。 


DocumentRoot "C:/dwphp" 


# docunents. By default, all requests are taken fron this directory, but 
# synbolic links and aliases nay be used to point to other locations- 


DocunentRoot “C:/Progran Files/Apache Group/apache2-5/hpache2/htdocs' 


DocunentRoot “C:/duphp” 


10-80 ”修改 字 串 


EC) 设置 完毕 之 后 ， 保 存 并 关闭 这 个 文件 。 选 择 【 开 始 】 一 【所 有 程序 】 一 Apache 
HTTP Server 2.5.10 一 Control Apache Server 一 Restart 选项 ， 重 新 启动 Apache 网 络 服 
务 器 。 

AppServ 插件 的 默认 路 径 为 C\AppServ， 而 phpMyAdmin 则 是 安装 在 C:\AppSerw\ 
www 文件 夹 中 ， 如 图 10-81 所 示 。 

EEC 将 phpMyAdmin 文件 夹 复制 到 C:\dwphp 中 完成 所 有 的 设置 ， 如 图 10-82 所 示 。 


注 基 站 浇 号 二 到 讲 时 般 寺 一 一 识 采 基 司 潮 寺 齐 人 册 0+ 浇 站 六 


10-81 ”系统 默认 安装 路 径 10-82 ”复制 文件 夹 更 改 路 径 


10.6” 跟 我 练 练 手 


10.6.1 练习 目标 

能 够 熟练 掌握 本 章 所 讲 内 容 。 
10.6.2 上 机 练习 

练习 1: 架设 IS+PHP 的 执行 环境 。 


练习 2: 架设 Apache+PHP 的 执行 环境 。 
练习 3: 安装 MySQL 数据 库 。 
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10.7 高 手 甜 点 


甜点 1: 架设 IS+PHP 环境 后 不 支持 MySQL 怎么 办 
在 php.ini 的 配置 文件 中 找到 mysql 栏目 ， 配 置 如 下 。 


mysql.default port=3306 
mysql.default host=localhost 
mysql.default user=root 


NN 然后 把 libmysql.dll 复制 到 system32 目录 下 ， 把 php.ini 复制 到 windows 目录 下 ， 最 后 重 
NN 新 启动 电脑 即 可 。 


甜点 2: Apache 网 站 服务 器 配置 修改 完成 后 不 能 生效 怎么 办 


在 Apache+PHP 的 执行 环境 下 ， 修 改 了 配置 文件 的 任何 一 项 设置 后 ， 必 须 重新 启动 
Apache 网 站 服务 器 ， 配 置 才 会 生效 。 


NN 
XX 


数据 库 是 动态 网 站 的 关键 性 数据 ， 可 以 说 没有 数据 库 就 不 可 能 实现 动态 网 站 的 
制作 。 本 章 将 介绍 如 何 定义 动态 网 站 及 使 用 MySQL 数据 库 ， 包 括 MySQL 数据 库 
的 使 用 方法 、 在 网 页 中 使 用 数据 库 、MySQL 数据 库 的 高 级 设 定 等 内 容 。 
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网 页 设计 与 网 站 建设 
案例 课堂 四 一 


11.1 定义 一 个 互动 网 站 


定义 一 个 互动 网 站 是 制作 动态 网 站 的 第 一 步 ， 许 多 初学 者 会 忽略 这 一 点 ， 以 至 于 由 
Dreamweaver CS6 所 产生 的 代码 无 法 与 服务 器 配合 。 


11.1.1 定义 互动 网 站 的 重要 性 


打开 Dreamweaver CS6 的 第 一 步 不 是 制作 网 页 和 写 程序 ， 而 是 先 定 义 所 制作 的 网 站 ， 原 
因 有 以 下 3 点 。 

(1) 将 整个 网 站 视 为 一 个 单位 来 定义 ， 可 以 清楚 地 整理 出 整个 网 站 的 架构 、 文 件 的 配置 网 
页 之 间 的 关联 等 信息 。 

(2) 可 以 在 同一 个 环境 下 一 次 性 定义 多 个 网 站 ， 而 且 各 个 网 站 之 间 不 冲突 。 

(3) 在 Dreamweaver CS6 中 添加 了 一 项 测试 服务 器 的 设置 ， 如 果 事 先 定义 好 了 网 站 ， 就 可 
以 让 该 网 站 的 网 页 连接 到 测试 服务 器 的 数据 库 资源 当中 ， 又 可 以 在 编辑 画面 中 预览 数据 库 中 
的 数据 ， 甚 至 打开 浏览 器 来 运行 。 


11.1.2 “案例 1 一 一 在 Dreamweaver CS6 中 定义 网 站 

设置 网 站 服务 器 是 编写 所 有 动态 网 页 前 的 第 一 个 操作 ， 因 为 动态 数据 必须 要 通过 网 站 服 
务 器 的 服务 才能 运行 ， 许 多 人 都 会 忽略 这 个 操作 ， 以 至 于 程序 无 法 执行 或 是 出 错 。 

1. 整理 制作 范例 的 网 站 信息 


在 开始 操作 之 前 ， 请 先 养 成 一 个 习惯 一 一 整理 制作 范例 的 网 站 信息 ， 有 具体 就 是 ;将 所 要 
制作 的 网 站 信息 以 表格 的 方式 列 出 ， 再 按 表 来 实施 ， 这 样 不 仅 可 以 让 网 站 数据 井井有条 ， 也 
使 得 在 进行 维护 工作 时 能 够 更 快 地 掌握 网 站 情况 。 

如 表 11-1 所 示 为 整理 出 来 的 网 站 信息 表 。 


表 11-1 网 站 信息 表 


信息 名 称 内 容 

网 站 名 称 DWMXPHP 测试 网 站 
本 机 服务 器 主 文件 夹 C:\Apache?2.2\htdocs 
程序 使 用 文件 夹 C:\Apache?2.2\htdocs 
程序 测试 网 址 http://localhost/ 

2. 定义 新 网 站 

整理 好 网 站 的 信息 后 ， 下 面 就 可 以 正式 进入 Dreamweaver CS6 进行 网 站 编辑 了 ， 具 体操 

作 步 又 如 下 。 


EEJDp 在 Dreamweaver CS6 的 编辑 界面 中 ， 选 择 【 站 点 】 一 【管理 站 点 】 菜 单 命 
令 ， 如 图 11-1 所 示 。 
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EEIPy% 在 【管理 站 点 】 对 话 框 中 单 击 【新 建站 点 】 按 钮 ， 如 图 11-2 所 示 。 


报告 也 ) 


11-1 选择 【管理 站 点 】 菜 单 命令 11-2 【管理 站 点 】 对 话 框 


Pe 另外 ， 用 户 也 可 以 直接 选择 【站 点 〗 一 【新 建站 点 〗 菜 单 命令 打开 站 点 设置 对 话 
外 框 ， 如 图 11-3 所 示 。 
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图 11-3 选择 【新 建站 点 】 菜 单 命令 


EuBp 打开 站 点 设置 对 话 框 ， 输 入 站 点 名 称 为 “DWMXPHP 测试 网 站 ”， 选 择 本 地 站 
点 文件 夹 位 置 为 C:\Apache2.2\htdocs\， 如 图 11-4 所 示 。 
EEC 在 左 侧 列表 中 选择 【服务 器 】 选 项 ， 单 击 【+】 1 如 图 11-5 所 示 。 


图 11-4 设置 站 点 的 名 称 与 存放 位 置 图 11-5 【服务 器 】 选 项 卡 


EEIRDp 在 【基本 】 选 项 卡 中 输入 服务 器 名 称 为 “DWMXPHP 测试 网 站 ”， 选 择 连接 方 
法 为 【本 地 /网 络 】， 选 择 服务 器 文件 夹 为 C:\Apache2.2， 如 图 11-6 所 示 。 
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Se URL(Uniform Resource Locator， 统 一 资源 定位 器 ) 是 一 种 网 络 上 的 定位 系统 ， 可 
SEE 称 为 网 站 。Host 是 指 Internet 连接 的 计算 机 ， 至 少 有 一 个 固定 的 瑟 地 址 。Localhost 
是 指 本 地 端的 主机 ， 也 就 是 用 户 自 己 的 计算 机 。 


EEJD 切换 到 【高 级 】 选 项 卡 ， 设 置 测 试 服务 器 的 服务 器 模型 为 PHP MySQL， 最 后 单 
击 【保存 】 按 钮 保存 站 点 设置 ， 如 图 11-7 所 示 。 


11-6 【基本 】 选 项 卡 11-7 【高 级 】 选 项 卡 


重地 其 他 可 选 的 服务 器 模型 有 : ASP VBScript、ASP JavaScript、ASP. NET (C#、 


| 攻 VB)、ColdFusion、JSP 等 。 


EC 返回 到 Dreamweaver CS6 的 编辑 界面 中 ， 在 【文件 】 面 板 中 会 显示 所 设置 的 结 
果 ， 如 图 11-8 所 示 。 

EERD 如 果 想 要 修改 已 经 设置 好 的 网 站 ， 可 以 选择 【站 点 】 一 【站 点 管理 】 菜 单 命 
令 ， 在 打开 的 对 话 框 中 单 击 铅笔 按钮 ， 再 次 编辑 站 点 的 属性 ， 如 图 11-9 所 示 。 


11-8 Dreamweaver CS6 的 编辑 界面 11-9 【管理 站 点 】 对 话 框 
3. 测试 设置 结果 


完成 了 以 上 的 设置 后 ， 下 面 可 以 制作 一 个 简单 的 网 页 来 测试 一 下 ， 上 有 具体 操作 步骤 如 下 。 

EEC 在 【文件 】 面 板 中 添加 一 个 新 文件 并 打开 该 文件 进行 编辑 。 要 添加 新 文件 ， 可 
选取 该 网 站 文件 夹 后 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 建文 件 】 命 令 ， 新 建 一 个 
文件 如 图 11-10 所 示 。 

EECD) 双击 test.php 打开 新 文件 ， 在 页 面 中 添加 一 些 文字 ， 如 图 11-11 所 示 。 
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图 11-10 新建 文件 11-11 添加 网 页 内 容 


ES 添加 完成 后 直接 按 F12 键 打开 浏览 器 来 预览 ， 可 以 看 到 页 面 执行 的 结果 如 
图 11-12 所 示 。 


Hi, Dreamweaver CS6!!! 


图 11-12 ”网 页 预览 结果 


@u: 不 过 这 样 似乎 与 预览 静态 网 页 时 没有 什么 区 别 。 仔 细 看 看 这 个 网 页 所 执行 的 网 
沪 。 址 ， 它 不 再 是 以 磁盘 路 径 来 显示 ， 而 是 以 刚才 设置 的 URL 前 级 tplocalhost/ 再 加 上 
文件 名 来 显示 的 ， 这 表示 网 页 是 在 服务 器 的 环境 中 运行 的 。 


EEC 仅仅 这 样 还 不 能 完全 显示 出 互动 网 站 服务 器 的 优势 ， 再 加 入 一 行 代码 来 测试 程 
序 执行 的 能 力 。 回 到 Dreamweaver CS6 中 ， 添 加 动态 时 间 代 码 ， 如 图 11-13 所 示 。 


um 代码 中 的 date0 是 一 个 PHP 的 时 间 函 数 ， 其 中 的 参数 用 于 设置 显示 格式 ， 可 以 显 
站 示 目 前 服务 器 的 时 间 ， 而 <?php echo...?> 会 将 函数 所 取得 的 结果 送 到 前 端 浏览 器 来 显 
示 ， 所 以 在 执行 这 个 页 面 时 ， 应 该 会 在 网 页 上 显示 出 服务 器 的 当前 时 间 。 
区 于 BY 按 Cults 组 合 键 保存 文件 后 ， 再 按 F12 键 打开 浏览 器 进行 预览 ， 在 刚才 的 网 页 下 
方 出 现 了 当前 时 间 ， 如 图 11-14 所 示 ， 这 就 表示 我 们 的 设置 确实 可 用 ，Dreamweaver 
CS6 的 服务 器 环境 也 就 此 开始 了 。 
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图 11-13 添加 动态 代码 图 11-14 动态 网 页 预览 结果 
11.2 MySQL 数据 库 的 使 用 
要 使 一 个 网 站 达到 互动 效果 ， 不 是 让 网 页 充满 了 动画 和 音乐 ， 而 是 当 浏 览 者 对 网 页 提出 
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要 求 时 能 出 现 响 应 的 结果 。 这 样 的 效果 大 多 需要 搭配 数据 库 的 使 用 ， 让 网 页 读 出 保存 在 数据 
库 中 的 数据 ， 显 示 在 网 页 上 。 因 为 每 个 浏览 者 对 于 某 个 相同 的 网 页 所 提出 的 要 求 不 同 ， 显 示 
出 的 结果 也 不 同 ， 这 才 是 真正 的 互动 网 站 。 


11.2.1 数据 库 的 原理 


Dreamweaver CS6 可 连接 的 数据 库 类 型 很 多 ， 从 dBase 到 目前 市 场 上 的 主流 数据 库 
Access、SQLServer、MySQL、Oracle 等 都 能 使 用 。 在 Dreamweaver CS6 开发 PHP 互动 网 站 
的 环境 下 所 搭配 的 数据 库 为 MySQL， 在 使 用 数据 库 之 前 ， 我 们 必须 对 数据 库 的 构造 及 运行 方 
式 有 所 了 解 ， 才 能 有 效 地 制作 互动 程序 。 

数据 库 (Database) 是 一 些 相关 数 据 的 集合 ， 我 们 可 以 用 一 定 的 原则 与 方法 添加 、 编 辑 和 
删除 数据 的 内 容 ， 进 而 对 所 有 数据 进行 搜索 、 分 析 及 对 比 ， 取 得 可 用 的 信息 ， 产 生 所 需 的 
结果 。 

一 个 数据 库 中 不 是 只 能 保存 一 种 简单 的 数据 ， 可 以 将 不 同 的 数据 内 容 保 存在 同一 个 数据 
库 中 。 例 如 ， 在 进 销 存 管理 系统 中 ， 可 以 同时 将 货物 数据 与 厂商 数据 保存 在 同一 个 数据 库 文 
件 中 ， 归 类 及 管理 时 较为 方便 。 

若 不 同类 的 数据 之 间 有 关联 ， 还 可 以 彼此 使 用 。 例 如 ， 可 以 查询 出 某 种 产品 的 名 称 、 规 
格 及 价格 ， 而 且 可 以 利用 其 厂商 编号 查询 到 厂商 名 称 及 联系 电话 。 我 们 称 保存 在 数据 库 中 不 
同类 别 的 记录 集合 为 数据 表 (Table)， 一 个 数据 库 中 可 以 保存 多 个 数据 表 ， 而 每 个 数据 表 之 间 
并 不 是 互 不 相干 的 ， 如 果 有 关联 的 话 ， 是 可 以 协同 作业 、 彼 此 合作 的 ， 如 图 11-15 所 示 。 

每 一 个 数据 表 都 由 一 个 个 字段 组 合 起 来 ， 例 如 ， 在 产品 数据 表 中 ， 可 能 会 有 产品 编号 、 
产品 名 称 、 产 品 价格 等 字段 ， 只 要 按照 一 个 个 字段 的 设置 输入 数据 ， 即 可 完成 一 个 完整 的 数 


据 表 ， 如 图 11-16 所 示 。 
= 


11-15 ”数据 库 示 意图 11-16 ”数据 表示 意图 


这 里 有 一 个 很 重要 的 概念 ， 一 般 人 认为 数据 库 是 保存 数据 的 地 方 ， 这 是 不 对 的 ， 其 实数 
据 表 才 是 真正 保存 数据 的 地 方 ， 数 据 库 是 放置 数据 表 的 场所 ， 如 图 11-17 所 示 。 


有 下 靖 的 数据 库 报 念 ， 在 编写 彼 
序 附 才 不 会 如 到 困扰 


11-17 ”数据 存放 位 置 
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11.2.2 “案例 2 一 一 数据 库 的 建立 


MySQL 数据 库 的 指令 都 是 在 命令 提示 符 界面 中 使 用 的 ， 但 这 对 于 初学 者 是 比较 困难 的 。 | 
针对 这 一 难题 ， 本 书 将 采用 phpMyAdmin 管理 程序 来 执行 ， 以 便 能 有 更 简易 的 操作 环境 与 使 ”3 


用 效果 。 


1. 启动 phpMyAdmin 管理 程序 


phpMyAdmin 是 一 


套 使 用 PHP 程序 语言 开发 


的 管理 程序 ， 它 采用 网 页 形式 的 管理 界面 。 如 果 
要 正确 执行 这 个 管理 程序 ， 就 必须 要 在 网 站 服务 
器 上 安装 PHP 与 MySQL 数据 库 。 


在 上 一 章 中 ， 已 将 


phpMyAdmin 管理 程序 下 


载 后 的 压缩 文件 解压 在 本 机 服务 器 主 文件 夹 中 ， 
路 径 是 C:\Apache2.2\htdocs\phpMyAdmin， 如 果 要 


启动 phppMyAdmin 管理 


E 程 序 ， 只 要 打开 浏览 器 ， 


输入 网 址 http://localhost/phpMyAdmin/index.php 
即 可 ， 启 动 后 界面 如 图 11-18 所 示 。 


2. 创建 数据 库 


在 MySQL 数据 库 安装 完毕 之 后 ， 会 有 4 个 内 置 数据 库 : mysql、information schema、 


performance schema 及 


test。 


[es 


phpMyAdmin 
全 加 避让 


11-18 ” ”phpMyAdmin 的 工作 界面 


®@ ”mysql 数据 库 是 系统 数据 库 ， 在 24 个 数据 表 中 保存 了 整个 数据 库 的 系统 设置 ， 十 分 


重要 。 


e@ information_ schema 中 包括 数据 库 系 统 中 的 库 、 表 、 字 典 、 存 储 过 程 等 所 有 对 象 信息 


和 进程 访问 、 


状态 信息 。 


@ ”performance_schema 是 一 个 新 增 的 存储 引擎 ， 主 要 用 于 收集 数据 库 服务 器 性 能 参 
数 。 它 具有 以 下 功能 : 提供 进程 等 待 的 详细 信息 ， 包 括 锁 、 互 斥 变量 、 文 件 信息 ， 
保存 历史 的 事件 汇总 信息 ， 为 提供 MySQL 服务 器 性 能 做 出 详细 的 判断 ， 对 于 新 增 
和 删除 监控 事件 点 都 非常 容易 ， 并 可 以 随意 改变 MySQL 服务 器 的 监控 周期 。 

@ test 数据库 是 让 用 户 测试 用 的 数据 库 ， 可 以 在 里 面 添加 数据 表 来 进行 测试 。 

可 以 在 菜单 中 看 到 MySQL 内 置 的 4 个 数据 库 ， 如 图 11-19 所 示 。 


ee 
-了 7 提示 


performance schema 是 MySQL 5.5 新 增 的 一 个 功能 ， 可 以 帮助 DBA 了 解 性 能 降 


外 低 的 原因 。mysql、information_schema 为 关键 库 ， 不 能 被 删除 ， 和 否则 数据 库 系统 不 再 


可 用 。 


这 里 以 在 MySQL 中 创建 一 个 学 校 班级 数据 库 class 为 例 ， 并 添加 一 个 同学 通讯 录 的 数据 
表 classmates。 如 图 11-20 所 示 ， 在 文本 框 中 输入 要 创建 数据 库 的 名 称 class， 再 单 击 【 创 建 】 


按钮 即 可 。 
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et a pr er 
= E 有 在 半 志 库 中 秆 到 天 ， 数据 库 加 SOL 已 状态 问 用 户 导 导 出 v 更 多 
RE 
证 如 扫 大 在 数据 库 
一 马 新 建 救 据 库 已 
class 整理 图 创建 
图 11-19 ”内 置 数据 库 图 11-20 ”新 建 学 校 班级 数据 库 


a 在 一 个 数据 库 中 可 以 保存 多 个 数据 表 ， 以 本 页 所 举 的 范例 来 说 明 : 一 个 班级 的 数 
慌 。 据 库 中 ， 可 以 包含 同学 通讯 录 数 据 表 、 教 师 通 讯 录 数 据 表 、 期 中 考试 分 数 数据 表 等 。 
因此 ， 这 里 需要 创建 数据 库 class， 也 需要 创建 数据 表 classmates。 


3. 认识 数据 表 的 字段 
在 添加 数据 表 之 前 ， 首 先 要 规划 数据 表 中 要 使 用 的 字段 。 其 中 设置 数据 字段 的 类 型 非常 
重要 ， 使 用 正确 的 数据 类 型 才能 正确 保存 和 应 用 数据 。 
在 MySQL 数据 表 中 常用 的 字段 数据 类 型 可 以 分 为 3 个 类 别 。 
(1) 数值 类 型 。 可 用 来 保存 、 计 算 的 数值 数据 字段 ， 如 会 员 编号 、 产 品 价格 等 。MySQL 
中 的 数值 类 型 按照 保存 的 数据 所 需 空间 大 小 又 可 分 为 几 类 ， 如 表 11-2 所 示 。 
表 11-2 数值 数据 类 型 


存储 空间 数据 的 表示 范围 


: -128 ~ 127, unsigned: 0~255 


SMALLINT [zn | igned: -32768 ~32767, unsigned: 0 一 65535 


2B 
MEDIUMINT 3B : -8388608 ~8388607, unsigned0: 一 16777215 
lss | igned : -2147483 648 一 2 147483 647，unsigned0: 一 4294967295 
注 : signed 表示 其 数值 数据 可 能 有 负 值 ，unsigned 表示 其 数值 数据 均 为 正 值 。 
(2) 日 期 及 时 间 类 型 。 可 用 来 保存 日 期 或 时 间 类 型 的 数据 ， 如 会 员 生 日 、 留 言 时间 等 。 
MySQL 中 的 日 期 及 时 间 数 据 类 型 如 表 11-3 一 表 11-5 所 示 。 
表 11-3 日 期 数据 类 型 


数据 类 型 名 称 DATE 

存储 空间 3B 

数据 的 表示 范围 "1000-01-01 一 9999-12-31" 

数据 格式 "YYYY-MMDD"” "YYMMDD" "YYYYMMDD" "YYMMDD" 


YYYYMMDD YYMMDD 
注 : 在 数据 格式 中 ， 若 没有 加 上 引号 为 数值 的 表示 格式 ， 前 后 加 上 引号 为 字符 串 的 表示 格式 。 


全 i" 


国语 


世上 小 


表 11-4 时 间 数 据 类 型 


数据 类 型 名 称 TIME 
存储 空间 3B 
数据 的 表示 范围 | -838:59:59~'838:59:59' 


数据 格式 "hhmmss" hhmmss 


注 : 在 数据 格式 中 ， 若 没有 加 上 引号 为 数值 的 表示 格式 ， 前 后 加 上 引号 为 字符 串 的 表示 格式 。 


表 11-5 “日 期 与 时 间 数据 类 型 


数据 类 型 名 称 DATETIME 
存储 空间 [ss 
数据 的 表示 范围 '1000-01-01 00:00:00'~'9999-12-31 23:59:59' 
"YYYY-MM-DD hh:mm:ss” "YY-MM-DD hh:mm:ss” "YYYYMMDDhhmmss" 
"YYMMDDhhmmss" YYYYMMDDhhmmss YYMMDDhhmmss 
注 : 在 数据 格式 中 ， 若 没有 加 上 引号 为 数值 的 表示 格式 ， 前 后 加 上 引号 为 字符 串 的 表示 格式 。 
(3) 文本 类 型 。 可 用 来 保存 文本 类 型 的 数据 ， 如 学 生 姓 名 、 地 址 等 。MySQL 中 的 文本 类 
型 数据 如 表 11-6 所 示 。 


数据 格式 


IGG 


再 满 溢 1DSAW 酒 诊 灯 导 习 寺 起 光村 一 一 并 车 否 车 习 二 过 出 并 


表 11-6 文本 数据 类 型 


必须 指定 字段 大 小 ， 数 据 不 足 时 以 空白 字符 填 满 
必须 指定 字段 大 小 ， 以 实际 填 入 的 数据 内 容 来 存储 
无 须 指定 字段 大 小 


在 设置 数据 表 时 ， 除 了 要 根据 不 同性 质 的 数据 选择 适合 的 字段 类 型 之 外 ， 有 些 重要 的 字 
段 特性 定义 也 能 在 不 同 的 类 型 字段 中 发 挥 其 功能 ， 常 用 的 设置 如 表 11-7 所 示 。 


表 11-7 ”特殊 字段 数据 类 型 


定义 内 容 
定义 数值 数据 中 是 否 允 许 有 负 值 ，SIGNED 表示 允许 
自动 编号 ， 由 0 开始 以 1 来 累加 


特性 定义 名 称 适用 类 型 
SIGNED.UNSIGNED | 数值 类 型 


AUTOJNCREMENT 数值 类 型 


BINARY 文本 类 型 保存 的 字符 有 大 小 写 区 别 

NULL.NOTNULL 全 部 是 否 允许 在 字段 中 不 填 入 数据 

默认 值 全 部 若是 字段 中 没有 数据 ， 即 以 默认 值 填充 

主键 全 部 主 索引 ， 每 个 数据 表 中 只 能 允许 一 个 主键 列 ， 而 且 该 栏 数据 


不 能 重复 ， 加 强 数据 表 的 检索 功能 
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了 如 果 想 要 更 了 解 MySQL 其 他 类 型 的 数据 字段 及 详细 数据 ， 可 以 参考 MySQL 的 
”使 用 手册 或 MySQL 的 官方 网 站 http://www. mysqLcom。 


4. 添加 数据 表 
要 添加 一 个 同学 通讯 录 数 据 表 ， 如 表 11-8 所 示 是 这 个 数据 表 字 段 的 规划 。 
表 11-8 同学 通讯 录 数 据 


名 称 字 段 其 他 
座 号 ClassID TINYINIO) auto_increment 
姓名 className VARCHAR(20) 

性 别 classSex 默认 值 : 女 


生日 classBirthda 
电子 邮件 classEmail 
电话 classPhone 
住址 classAddress 


其 中 有 以 下 几 个 要 注意 的 地 方 。 

@ ” 座 号 (classID) 为 这 个 数据 表 的 主 索 引 字段 ， 它 是 数值 类 型 保存 的 数据 ， 因 为 一 般 座 号 
不 会 超过 两 位 数 ， 也 不 可 能 为 负数 ， 所 以 设置 它 的 字段 类 型 为 TINYINT(2)， 属 性 为 
UNSIGNED。 我 们 希望 在 添加 数据 时 ， 数 据 库 能 自动 为 学 生 编号 ， 所 以 在 字段 上 加 
入 了 auto_increment 自动 编号 的 特性 。 

@ ”姓名 (className) 属 于 文本 字段 ， 一 般 不 会 超过 10 个 中 文字 ， 也 就 是 不 会 超过 20B， 
所 以 这 里 设置 为 VARCHAR(20)。 

@ 性别 (classSex) 属 于 文本 字段 ， 因 为 只 保存 一 个 中 文字 (“ 男 ”或 “ 女 ”)， 所 以 设置 
为 CHAR(2)， 默 认 值 为 “ 女 ”。 

@ 生日 (classBirthday) 属 于 日 期 时 间 格 式 ， 设 置 为 DATE。 

@ ”电子 邮件 (classEmail)、 电 话 (classPhone) 及 住址 (classAddress) 都 是 文本 字段 ， 设 置 为 
VARCHAR(100)， 最 多 可 保存 100 个 英文 字符 ，50 个 中 文字 。 因 为 每 个 人 不 一 定 有 
这 些 数 据 ， 所 以 这 3 个 字段 允许 为 空 。 

接着 就 要 回 到 phpMyAdmin 的 管理 界面 ， 为 MySQL 中 的 class 数据 库 添加 数据 表 。 选 择 

创建 的 class 数据 库 ， 输 入 添加 的 数据 表 名 称 和 字段 数 ， 然 后 单 击 【 执 行 】 按 钮 ， 如 图 11-21 
所 示 。 

按照 表 11-8 中 规划 的 数据 表 内 容 添加 数据 表 字段 ， 如 图 11-22 所 示 。 

设置 的 过 程 中 要 注意 以 下 4 点。 

@ 设置 classID 为 整数 。 

@ 设置 classID 为 自动 编号 。 

@ 设置 classID 为 主键 列 。 

@ 人 允许 classEmail、classPhone、classAddress 为 空位 。 


Gu 


设置 完毕 之 后 ， 单 击 【 保 存 】 按 钮 ， 在 打开 的 界面 中 可 以 查看 完成 的 classmates 数据 
表 ， 如 图 11-23 所 示 。 


pnpMuAdmin 有 ETETTETUITS 


11-23 ”classmates 数据 表 
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5. 添加 数据 


添加 数据 表 后 ， 还 需要 添加 具体 的 数据 ， 具 体操 作 步 又 如 下 。 

EEC 选择 classmates 数据 表 ， 选 择 菜 单 中 的 【插入 】 链 接 ， 如 图 11-24 所 示 。 

EEC 依照 字段 的 顺序 ， 将 对 应 的 数值 依次 输入 ， 单 击 【 执 行 】 按 钮 ， 即 可 插入 数 
据 。 选 择 【 继 续 插入 1 行 】 选 项 即 可 继续 添加 数据 ， 如 图 11-25 所 示 。 


司 刘 我 二 由 本 soL 位 关 放 开拓 和 问号 由 三 导入 办 保 作 己 凶 发 可 
FR 
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图 11-24 选择 插入 图 11-25 插入 数据 


EC) 按照 如 图 11-26 所 示 的 数据 ， 重 复 执 行 步骤 step01 一 step02 的 操作 ， 将 数据 输 
入 到 数据 表 中 。 
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classID className classSex classBirthday classEmail classPhone classAddress 
卫 杞 小 启 时 1966-02-11 ”| puing@seetv com 049-988876 ”南投 县 埔里 秆 六 合 路 12 号 
2 全 小 机 女 1987-12-12 。 Ningyean@seetv com 02-27042762 副 化 南路 938 号 5 楼 
3 支 泪 。 男 1980-03-26 。 | ansu@seetv com 02-20981230 忠孝 革 路 520 号 6 楼 
4 车 小 弦 | 男 1976-05-15 。 carsung@seetv com 04-4530768 “中 新 路 530 号 7 楼 
5 改 小 例 。 男 1976-04-02 。 payjung@seetv com “07-6820035 左 营区 1777 号 6 楼 
6 未 小 允 这 1989-04-04 。 songyung@seetv com 049-983366 ”南投 县 博 里 销 南 门路 一 疮 10 号 
7 宋 让 完 。 男 1979-12-24 。 songsyan@seetv com 049-123456 “南投 县 鱼 邮 乡 玉 广 若 123 号 
8 浴 小 琳 E3 1976-04-18 。 tsuiling@seetv com 02-27408965 长 安 路 256 号 9 楼 
9 元 小 区 。 男 1973-09-18 。 uangbing@seetv com 049-456723 南投 县 博 里 稍 建 国 北 路 10 号 
10 李 小 受 女 1954-03-03 leei@seety com 049-976588 ”南投 县 博 里 请 北 环 路 一 址 80 号 


11-26 输入 的 数据 


11.3 ”在 网 页 中 使 用 MySQL 数据 库 


一 个 互动 网 页 的 呈现 ， 实 际 上 就 是 将 数据 库 整 理 的 结果 显示 在 网 页 上 ， 因 此 ， 如 何在 网 
页 中 连接 到 数据 库 ， 并 读 出 数据 显示 ， 甚 至 选择 数据 来 更 改 ， 就 是 一 个 重点 。 


11.3.1 网 页 取得 数据 库 的 原理 


PHP 是 一 种 网 络 程序 语言 ， 它 并 不 是 MySQL 数据 库 的 一 部 分 ， 所 以 PHP 的 研发 单位 就 
制作 了 一 套 与 MySQL 沟通 的 函数 。SQL(Structured Query Language， 结 构 化 查询 语言 ) 就 是 这 
些 函数 与 MySQL 数据 库 连 接 时 所 运用 的 方法 与 准则 。 

几乎 所 有 的 关系 式 数据 库 所 采用 的 都 是 SQL 语法 ， 而 MySQL 就 是 使 用 它 来 定义 数据 库 
结构 、 指 定数 据 库 表 格 与 字段 的 类 型 与 长 度 、 添 加 数据 、 修 改 数据 、 删 除数 据 、 查 询 数据 ， 
以 及 建立 各 种 复杂 的 表格 关联 的 。 

所 以 ， 当 网 页 中 需要 取得 MySQL 的 数据 时 ， 它 可 以 应 用 PHP 中 MySQL 的 程序 函数 ， 
通过 SQL 的 语法 来 与 MySQL 数据 库 沟通 。 当 MySQL 数据 库 接收 到 PHP 程序 传递 过 来 的 
SQL 语法 后 ， 再 根据 指定 的 内 容 完 成 所 叙述 的 工作 返回 到 网 页 中 。PHP 与 MySQL 之 间 的 运 
行 方式 如 图 11-27 所 示 。 


= 
Php ee 
网 页 应 用 程序 A 


11-27 PHP 与 MySQL 之 间 的 运行 方式 


根据 这 个 原理 ， 一 个 PHP 程序 开发 人 员 只 要 在 使 用 数据 库 时 遵循 下 列 步骤 ， 即 可 顺利 获 
得 数据 库 中 的 资源 。 

(1) 建立 连接 (Connection) 对 象 来 设置 数据 来 源 。 

(2) 建立 记录 集 (Recordseb 对 象 并 进行 相关 的 记录 操作 。 

(3) 关闭 数据 库 连接 并 清除 所 有 对 象 。 


[e 


11.3.2 ”案例 3 一 一 建立 MySQL 数据 库 连接 


在 Dreamweaver CS6 中 ， 连 接 数 据 库 十 分 轻松 简单 ， 下 面 我 们 将 使 用 一 个 实例 来 说 明 如 
何 使 用 Dreamweaver CS6 建立 数据 库 连 接 。 
EEJDp 在 Dreamweaver CS6 中 ， 选 择 所 定义 的 网 站 “DWPHP 测试 网 站 ”， 新 建 一 个 文 
件 showdataphp， 并 打开 此 文件 ， 如 图 11-28 所 示 。 
EEJ2) 选择 【窗口 】 一 【数据 库 】 命 令 ， 进 入 【数据 库 】 面 板 。 单 击 【+】 按 钮 ， 选 择 
【MySQL 连接 】 命 令 ， 如 图 11-29 所 示 。 


区 
和 


11-28 ”新 建文 件 11-29 ”连接 数据 库 


EEC 打开 【MySQL 连接 】 对 话 框 ， 填 入 自 定义 的 连接 名 称 connClass， 填 入 MySQL 
服务 器 的 用 户 名 和 密码 ， 单 击 【 选 取 】 按 钮 来 选取 连接 的 数据 库 ， 如 图 11-30 所 示 。 

EEC 打开 【选取 数据 库 】 对 话 框 ， 选 择 class 数据 库 ， 单 击 【 确 定 】 按 钮 ， 如 图 11-31 
所 示 。 


册 满 内 1DSAW 洒 罕 灯 导 习 坟 站 X 对 一 一 料 汝 否 导 习 斌 起 栅 煤 册 上 沂 


11-30 【MySQL 连接 】 对 话 框 11-31 【选取 数据 库 】 对 话 框 


本 于 BY 返回 到 原 界 面 后 ， 单 击 【 测 试 】 按 钮 提示“ 成 功 创建 连接 脚本 ”， 单 击 【 确 
定 】 按 钮 ， 如 图 11-32 所 示 。 

回 到 Dreamweaver CS6 后 ， 可 以 打开 【数据 库 】 面 板 ，class 数据 库 的 classmates 
数据 表 在 连接 设置 后 已 经 被 读 入 Dreamweaver CS6 了 ， 如 图 11-33 所 示 。 


图 11-32 ”连接 数据 库 图 11-33 【数据 库 】 面 板 


i197@ 


全 1 


网 页 设计 与 网 站 建设 
案例 课堂 由 ~ 


pr 权限 概念 的 实现 是 MySQL 数据 库 的 特色 之 一 。 在 设置 连接 时 ，Dreamweaver 
站 。 CS6 不 时 会 提醒 为 数据 库 管 理 员 加 上 密码 ， 目 的 是 要 让 权限 管理 加 上 最 后 一 道 锁 。 
MySQL 数据 库 默认 是 不 为 管理 员 账 户 加 密码 的 ， 所 以 必须 在 MySQL 数据 库 调整 后 
再 回 到 Dreamweaver CS6 时 修改 设置 ， 在 11.4 节 中 我 们 会 说 明 这 个 重点 。 


11.3.3 ”案例 4 一 一 绑 定 记录 集 


在 11.3.1 节 中 ， 曾 讲 过 网 页 若 要 用 到 数据 库 中 的 资源 ， 在 建立 连接 后 ， 必 须 建 立 记录 集 
才能 进行 相关 的 记录 操作 。 在 这 一 节 中 ， 我 们 先 简单 说 明 如 何在 建立 连接 之 后 添加 记录 集 。 
所 谓 记 录 集 ， 就 是 将 数据 库 中 的 数据 表 按 照 要 求 来 筛选 、 排 序 整理 出 来 的 数据 。 我 们 可 
以 在 【 绑 定 】 面 板 中 进行 操作 。 
EEC》 切换 到 【 绑 定 】 面 板 ， 单 击 【+】 按 钮 ， 选 择 【 记 录 集 (查询 )】 命 令 ， 如 图 11-34 
所 示 。 
EGRPp 打开 【记录 集 】 对 话 框 ， 输 入 记录 集 名 称 ， 选 择 使 用 的 连接 ， 选 择 使 用 的 数据 
表 ， 选 中 【全 部 】 单 选 按钮 ， 显 示 全 部 字段 ， 最 后 单 击 【确定 】 按 钮 ， 如 图 11-35 


所 示 。 


图 11-34 ”选择 【记录 集 (查询 )】 命 令 图 11-35 【记录 集 】 对 话 框 
GTIEY 单 击 【测试 】 按 钮 来 测试 连接 结果 ， 此 时 出 现 【测试 SQL 指令 】 对 话 框 ， 其 中 
显示 了 数据 表 中 的 所 有 数据 ， 如 图 11-36 所 示 ， 单 击 【确定 】 按 钮 回 到 【记录 集 】 
对 话 框 ， 如 图 11-36 所 示 ， 再 单 击 【 确 定 】 按 钮 结束 设置 ， 回 到 【 绑 定 】 面 板 。 
ETZY 在 【 绑 定 】 面 板 中 会 看 到 名 为 【记录 集 (RecClassMates)】 的 记录 集 ， 单 击 田 司 
按钮 可 以 看 到 记录 集 内 的 所 有 字段 名 称 ， 如 图 11-37 所 示 。 
IE | 


图 11-36 【测试 SQL 指令】 对 话 框 图 11-37 【 绑 定 】 面 板 


国 于 YY 拖 动 这 些 字段 将 它 放 在 网 页 上 显示 ， 如 图 11-38 所 示 。 
EI》 拖 动 完毕 之 后 的 显示 效果 如 图 11-39 所 示 。 


Dw = 
ed 


Dw 六 
ND RR 是 加 AD 后 好 加 半日 站 四 加 台币 四 


图 11-38 ” 拖 动 字段 11-39 ”最 终 效果 


ET 在 当前 设置 中 ， 若 是 预览 ， 只 会 读 出 数据 表 的 第 一 笔 数 据 ， 我 们 需要 设置 重复 
区 域 ， 将 所 有 数据 一 一 读 出 。 首 先 要 选取 设置 重复 的 区 域 。 在 【服务 器 行为 】 选 项 
卡 中 单 击 【+】 按 钮 ， 在 弹出 的 快捷 菜单 中 选择 【重复 区 域 】 命 令 ， 如 图 11-40 所 示 。 

EEC 在 打开 的 【重复 区 域 】 对 话 框 中 设置 【显示 】 为 【所 有 记录 】 来 显示 所 有 数 
据 ， 再 单 击 【确定 】 按 钮 ， 如 图 11-41 所 示 。 


11-40 选择 【重复 区 域 】 命 令 11-41 【重复 区 域 】 对 话 框 


ECGRD) 设置 完毕 后 ， 在 表格 上 方 可 以 看 到 “重复 ”灰色 标签 ， 如 图 11-42 所 示 。 


a I 


图 11-42 添加 “重复 ”标签 
EE 接 下 来 就 能 预览 结果 了 。 单 击 【 活 动 数据 视图 】 按 钮 进入 即时 数据 视图 的 显示 
模式 ， 会 看 到 在 编辑 页 面 里 数据 被 全 部 读 了 进来 ， 如 图 11-43 所 示 。 
ED 可 以 按 F12 键 打开 浏览 器 。Dreamweaver CS6 轻 轻 松 松 地 将 数据 库 的 数据 化 为 


世上 比 涝 恒 
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真实 的 网 页 了 ， 如 图 11-44 所 示 。 这 样 便 完成 了 showdata.php 的 制作 ， 选 择 【文件 】 
一 【保存 】 菜 单 命 令 保存 此 网 页 。 


mm me rE RN 是 
ES , 


全 同学 通 训 科 


11-43” 读 出 的 数据 信息 图 11-44 ”网 页 预览 效果 


11.4 ”加 密 MySQL 数据 库 


本 节 来 介绍 MySQL 数据 库 的 高 级 应 用 ， 主 要 包括 MySQL 数据 库 的 安全 、MySQL 数据 
库 的 加 密 等 内 容 。 


11.4.1 MySQL 数据 库 的 安全 问题 


MySQL 数据 库 是 存在 于 网 络 上 的 数据 库 系 统 。 只 要 是 网 络 用 户 ， 都 可 以 连接 到 这 个 资 
源 。 如 果 没 有 权限 或 其 他 措施 ， 任 何人 都 可 以 对 MySQL 数据 库 进行 存 取 。MySQL 数据 库 在 
安装 完毕 后 ， 默 认 是 完全 不 设防 的 ， 也 就 是 任何 人 都 可 以 不 使 用 密码 就 连接 到 MySQL 数据 
库 ， 这 是 一 个 相当 危险 的 安全 漏洞 。 


1. phpMyAdmin 管理 程序 的 安全 考虑 


phpMyAdmin 是 一 套 网 页 界面 的 MySQL 管理 程序 ， 有 许多 PHP 的 程序 设计 师 都 会 将 这 
套 工具 直接 上 传 到 他 的 PHP 网 站 文件 夹 里 ， 管 理 员 只 需 从 远 端 通过 浏览 器 登录 phpMyAdmin 
即 可 管理 数据 库 。 

这 个 方便 的 管理 工具 是 否 也 是 方便 的 入 侵 工具 呢 ? 没 错 ， 只 要 是 对 phpMyAdmin 管理 较 
为 熟悉 的 朋友 ， 看 到 该 网 站 使 用 的 是 PHP+MySQL 的 互动 架构 ， 都 会 去 测试 该 网 站 
<phpMyAdmin> 的 文件 夹 中 是 否 安装 了 phpMyAdmin 管理 程序 ， 若 是 网 站 管理 员 一 时 政 忽 ， 
很 容易 让 人 猜 中 ， 进 入 该 网 站 的 数据 库 。 


2. 防 堵 安全 漏洞 的 建议 


无 论 是 MySQL 数据 库 本 身 的 权限 设置 ， 还 是 phpMyAdmin 管理 程序 的 安全 漏洞 ， 为 了 
避免 他 人 通过 网 络 入 侵 数 据 库 ， 必 须 先 做 以 下 几 件 事 。 

(1) 修改 phpMyAdmin 管理 程序 的 文件 夹 名 称 。 这 个 做 法 虽然 简单 ， 但 至 少 已 经 挡 掉 一 
大 半 非 法 入 侵 者 了 。 最 好 修改 成 不 容易 被 猜 到 的 名 称 ， 如 与 管理 或 是 MySQL、phpMyAdmin 
等 关键 字 无 关 。 


(2) 为 MySQL 数据 库 的 管理 账号 加 上 密码 。 我 们 一 再 提 到 MySQL 数据 库 的 管理 账号 
root 默认 是 不 设 任何 密码 的 ， 这 就 好 像 装 了 安全 系统 ， 却 没 打 开 电 源 开关 一 样 ， 所 以 ， 蔡 root 
加 上 密码 是 相当 重要 的 。 


(3) 养 成 备份 MySQL 数据 库 的 习惯 。 万 一 用 户 的 所 有 安全 措施 都 失效 了 ， 若 平常 就 有 备 
份 的 习惯 ， 即 使 数据 被 删除 了 ， 还 是 能 够 很 轻松 地 进行 恢复 。 


11.4.2 ”案例 5 一 一 为 MySQL 管理 账号 加 上 密码 
在 MySQL 数据 库 中 ， 管 理 员 账号 为 root， 为 了 保护 数据 库 账 号 的 安全 ， 我 们 可 以 为 管理 
员 账号 加 密 ， 具 体操 作 步骤 如 下 。 


ED 打开 浏览 器 ， 在 网 址 栏 中 输入 //http:localhost/phpMyAdmin/index.php， 进 入 
phpMyAdmin 的 管理 主 界面 。 单 击 【 权 限 】 链 接 ， 来 设置 管理 员 账 号 的 权限 ， 如 
图 11-45 所 示 。 

EEID9 这 里 有 两 个 root 账号 ， 分 别 为 由 本 机 (localhosb 进 入 和 所 有 主机 进入 的 管理 账 


号 ， 默 认 没 有 密码 。 首 先 修改 所 有 主机 的 密码 ， 单 击 【编辑 权限 】 链 接 ， 进入 下 一 
界面 ， 如 图 11-46 所 示 。 
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11-45 ”设置 管理 员 密 码 


图 11-46 【查看 用 户 】 界面 

EC) 在 打开 的 界面 中 的 【密码 】 文 本 框 中 输入 所 要 使 用 的 密码 ， 单 击 【 执 行 】 按 
钮 ， 如 图 11-47 所 示 。 

EC 执行 完成 后 ， 将 显示 执行 的 SQL 语句 。 单 击 【编辑 权限 】 链 接 ， 设 置 另 一 个 账 
号 的 密码 ， 操 作 方 法 和 上 一 步 类 似 ， 不 再 重复 讲述 ， 如 图 11-48 所 示 。 


?amE 避 soL 记 t 本 已 S4， 沪 二 各 B 坟 
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11-47 ”修改 密码 
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Sn 修改 完毕 之 后 可 以 重新 登录 管理 界面 ， 就 可 以 正常 使 用 MySQL 数据 库 的 资源 
半 。 了 。 修改 过 数据 库 密码 之 后 ， 需 要 同时 修改 网 站 的 数据 库 连 接 设置 ， 操 作 见 11.3.2 节 
的 step03， 设 置 root 密码 为 相应 密码 即 可 。 


11.5 ”实战 演练 一 一 数据 库 的 备份 与 还 原 


在 MySQL 数据 库 里 备份 数据 ， 是 十 分 简单 又 轻松 的 事情 。 在 本 节 中 ， 我 们 将 说 明 如 何 
备份 与 还 原 MySQL 的 数据 库 。 


1. 数据 库 的 备份 


用 户 可 以 使 用 phpMyAdmin 的 管理 程序 将 数据 库 中 的 所 有 数据 表 导 出 成 一 个 单独 的 文本 
文件 。 当 数据 库 受 到 损坏 或 是 要 在 新 的 MySQL 数据 库 中 加 入 这 些 数据 时 ， 只 要 插入 这 个 文 
本 文件 即 可 。 

以 本 章 所 使 用 的 文件 为 例 ， 先 进入 phpMyAdmin 的 管理 界面 ， 下 面 就 可 以 备份 数据 库 
了 ， 有 具体 操作 步骤 如 下 。 

EC 选择 需要 导出 的 数据 库 ， 单 击 【 导 出 】 和 链接， 进入 下 一 页 ， 如 图 11-49 所 示 。 

ECEJUP9 选择 导出 方式 为 【快速 -显示 最 少 的 选项 】， 单 击 【执行 】 按 钮 ， 如 图 11-50 


所 示 。 
php ETE 
到 正在 导出 数据 库 "test" 中 的 数据 表 
phpMyAdmin [ZTC 和 , 
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图 11-49 选择 要 导出 的 数据 库 图 11-50 选择 导出 方式 


EECep 打开 【文件 下 载 】 对 话 框 ， 单 击 【保存 】 按 钮 ， 如 图 11-51 所 示 。 
EC 打开 【另存 为 】 对 话 框 ， 在 其 中 输入 保存 文件 的 名 称 ， 设 置 保存 类 型 及 位 置 ， 
如 图 11-52 所 示 。 
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11-51 【文件 下 载 】 对 话 框 11-52 【另存 为 】 对 话 框 
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mm MySQL 备份 下 的 文件 是 扩展 名 为 *.sql 的 文本 文件 ， 这 样 的 备份 操作 不 仅 简单 ， 
SS 文件 内 容 也 较 小 。 


2. 数据 库 的 还 原 


还 原 数据 库 文件 的 操作 步骤 如 下 。 

EEJDp 在 执行 数据 库 的 还 原 操作 前 ， 必 须 将 原来 的 数据 表 删 除 。 单 击 classmates 的 【 删 
除 】 链 接 ， 如 图 11-53 所 示 。 

EC) 此 时 会 显示 一 个 询问 界面 ， 单 击 【 确 定 】 按 钮 ， 如 图 11-54 所 示 。 


x 

pnoMyAdmin EERE DROP TABLE classmates 

ae 一 

~ 部 

EE ET es 取 | 确定 

-一 Bens Me pp 
图 11-53 ”选中 要 删除 的 数据 表 图 11-54 ”信息 提示 框 


四 BY 回 到 原 界 面 ， 会 发 现 该 数据 表 已 经 被 删除 了 ， 如 图 11-55 所 示 。 
YY 接着 插入 刚才 备份 的 class.sql 文件 ， 将 该 数据 表 还 原 ， 单 击 【 导 入 】 链 接 ， 如 
图 11-56 所 示 。 


phpMyAdmin 


= Hen as A en 
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11-55 ”删除 数据 表 11-56 单 击 【 导 入 】 按 钮 


葬 于 BY 打开 导入 界面 ， 单 击 界面 中 的 【浏览 】 按 钮 ， 如 图 11-57 所 示 。 
EC 打开 【选择 要 加 载 的 文件 】 对 话 框 ， 选 择 刚才 备份 的 class.sql 文件 ， 单 击 【 打 
开 】 按 钮 ， 如 图 11-58 所 示 。 


导入 到 数据 库 “class" 可 
3 个 
要 导入 的 文件 ， rm 


文件 本 能 已 和 维 (gnip_ aip) 下 未 天光 大 sa 
L[ 甘 帝 方 动 站 民 。 名: .sqlzip 


IE Baiexsa: wo be) 一 可 
:| 到 Css]j]_™ | 
图 11-57 导入 界面 图 11-58 【选择 要 加 载 的 文件 】 对 话 框 


ES 单 击 【执行 】 按 钮 ， 系 统 即 会 读 取 class.sql 文件 中 所 记录 的 指令 与 数据 ， 将 数 
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据 表 恢复 ， 如 图 11-59 所 示 。 
本 于 BY 执行 完毕 后 ，class 数据 库 中 又 出 现 了 一 个 数据 表 ， 如 图 11-60 所 示 。 


导入 到 数据 库 "class" 


RAM: 


phpMyAdmin 


会 届 名 自 @ 
| class 到 


国 classmates 


铝 新 建 数 所 


11-59 ”开始 执行 导入 操作 11-60 ”导入 数据 表 
这 样 原来 删除 的 数据 表 classmates 又 还 原 了 ， 如 图 11-61 所 示 。 


56 二 移 局 SOL 闵 拓 家 加 二 机 因 5% 加 号 和 
表 。 报 作 行 数 
厂 clawsmates 辣 刘 发 珍 革 构 二 执 索 了 后 目 洗 空 @ WN 
1 全 表 所 计 


人 二 过 /证 这 运 中 项 : 到 


篇 打印 5 多 局 阔 招 内 


11-61 ”数据 表 操 作 界面 


11.6” 跟 我 练 练 手 


11.6.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 


11.6.2 上 机 练习 


练习 1: 定义 动态 网 站 站 点 。 

练习 2: 使 用 MySQL 数据 库 。 

练习 3: 在 网 页 中 使 用 MySQL 数据 库 。 
练习 4: 加密 MySQL 数据 库 。 

练习 5: 备份 与 还 原 MySQL 数据 库 。 


11.7 高 手 甜 点 


甜点 1: 解决 PHP 读 出 MySQL 数据 时 的 中 文 乱码 问题 
在 连接 文件 中 加 入 如 下 代码 ， 如 图 11-62 所 示 。 


mysql query("set character set 'gb2312'");// 读 库 
mysql query("set names 'gb2312'");// 写 库 


过 


<zphp 
#8 FileName="Connection_php_mysql.htm” 
ey 


$hostnane_connclass = " 
eatabase comnelass = 
ur 


11-62 添加 代码 
甜点 2: 如 何 导出 指定 的 数据 表 


册 灌 内 1DSAW 洒 罕 灯 导 习 寺 起 X 对 一 一 料 茹 否 呈 习 


如 果 用 户 想 导出 指定 的 数据 表 ， 在 选择 导出 方式 时 ， 可 选中 【 自 定义 -显示 所 有 可 用 的 选 
项 】 单 选 按钮 ， 然 后 在 【数据 表 】 列 表 中 选择 需要 导出 的 数据 表 即 可 ， 如 图 11-63 所 示 。 
SbF 


人 快 天 -显示 最 少 的 造 页 
回 日 定 义 - 显示 所 有 可 用 的 和 项 


数据 表 : 
全 造 /全 不 这 | 
[SasSmatee SE 


11-63 ”导出 指定 的 数据 表 
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在 开发 动态 网 站 的 过 程 中 ， 开 发 人 员 经 常会 遇 到 要 添加 需要 的 应 用 模块 的 问 
题 ， 所 以 本 章 将 介绍 常见 动态 应 用 模块 的 开发 方法 和 技巧 ， 包 括 在 线 点 播 模 块 的 开 
发 、 网 页 搜索 模块 的 开发 、 在 线 支付 模块 的 开发 、 在 线 客服 模块 的 开发 和 天 气 预 报 
模块 的 开发 。 
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网 页 设计 与 网 站 建设 
案例 课堂 四 一 


12.1 网 站 模块 的 概念 


模块 是 指 在 程序 设计 中 ， 为 完成 某 一 功能 所 需 的 一 段 程序 或 子 程序 ， 或 是 指 能 由 编译 程 
序 、 装 配 程序 等 处 理 的 独立 程序 单位 ; 或 是 指 大 型 软件 系统 的 一 部 分 。 网 站 模块 是 指 在 网 站 
制作 中 能 完成 某 一 功能 所 需 的 一 段 程序 或 子 程序 。 

在 网 站 建设 中 ， 经 常用 到 的 一 些 功 能 如 在 线 客 服 、 在 线 播放 、 搜 索 、 天 气 预报 等 ， 称 
为 常用 功能 。 这 些 功 能 具有 很 好 的 通用 性 ， 在 学 习 掌握 之 后 可 以 直接 拿 来 用 到 自己 的 网 站 建 
设 中 。 


12.2 ”网 站 模块 的 使 用 


网 站 模块 是 一 段 完 成 某 一 功能 的 完整 代码 ， 在 使 用 的 时 候 ， 只 需要 在 合适 的 位 置 上 插入 
这 段 代码 就 行 了 。 


12.2.1 案例 1 一 一 程序 源 文 件 的 复制 


本 书 中 将 会 把 每 个 不 同 的 程序 以 文件 夹 的 方式 完整 地 整理 在 Ci\Apache2.2\htdocs 里 ， 请 
将 本 章 范例 文件 夹 中 的 “ 源 文件 model” 目 录 整 个 复制 到 C:\Apache2.2\htdocs 里 ， 这 样 就 可 以 
开始 进行 网 站 的 规划 。 


12.2.2 ”案例 2 一 一 新 建站 点 


首先 进入 Dreamweaver CS6， 选 择 【 站 点 】 一 【管理 站 点 】 菜 单 命令 ， 打 开 【 管 理 站 
点 】 对 话 框 ， 单 击 【 新 建站 点 】 按 钮 ， 打 开 【 站 点 设置 对 象 】 对 话 框 进行 设置 。 
在 【站 点 设置 对 象 】 对 话 框 中 ， 输 入 站 点 名 称 为 “DWPHPCS6 网 站 模块 ”， 
设置 本 站 点 文件 夹 为 C:\Apache2.2\htdocsmodel\， 如 图 12-1 所 示 。 
EEC 在 左 侧 列表 中 选择 【服务 器 】 选 项 ， 单 击 【+】 按 钮 ， 如 图 12-2 所 示 。 


修 可 以 在 此外 为 Dreamweaver 让 点 迁 择 本 地 文件 天 和 名称。 | = Tr 
让 点 名称 ; [DPC55 网 本 本 J 
本 地 吉文 件 才 : [cioscne2 ecs Wrocel BS ,opp 
ES EE EE EL 
bm 
0 [ET [mx | Ce mw] 
12-1 【站 点 设置 对 象 】 对 话 框 12-2 ”设置 服务 器 


$ 208 


国语 


GETE> 在 【基本 】 选 项 组 中 输入 服务 器 名 称 为 “DWPHPCS6 网 站 模块 ”， 选 择 连 接 广 
法 为 【本 地 /网 络 】， 选 择 服务 器 文件 夹 为 C:\Apache2.2\htdocs\imodel，Web URL 为 
http://localhost/model/， 如 图 12-3 所 示 。 

ED 切换 到 【高 级 】 选 项 卡 ， 设 置 测试 服务 器 的 服务 器 模型 为 PHP MySQL， 最 后 单 

击 【 保 存 】 按 钮 保存 站 点 设置 ， 如 图 12-4 所 示 。 


3 本 


远程 曾 科 器 
口 装 护 同步 信息 
口 保存 时 自动 持 文件 上 传 肥 服 和 器 
口 局 用 文件 取出 功能 
可 打 环 文件 之 前 职 出 
取出 名 各 
电 于 艺人 地 址 


时务 器 
服务 器 模 章 ;| PHP MySQL 


帮助 民 存 | 职 涌 攻 翅 保存 记 | 


泪 忆 条 六 洒 同 呈 司 夺 起 一 一 织 入 齐 埋 车 习 寺 过 种 书 册 Z 让 


图 12-3 【基本 】 选 项 卡 12-4 【高 级 】 选 项 卡 


GG 


12.3 ”常用 动态 网 站 模块 开发 
下 面 介绍 常见 动态 网 站 模 抉 的 开发 过 程 。 
12.3.1 案例 3 一 一 在 线 点 播 模 块 开发 
在 线 点 播 不 仅 能 实现 视频 播放 功能 ， 而 且 可 以 实现 许多 有 用 的 辅助 功能 ， 如 控制 播放 器 


窗口 状态 、 开 启 声音 。 
在 线 点 播 模块 的 运行 效果 如 图 12-5 所 示 。 


在 线 点 播放 并 双 


图 12-5 在线 点 播 模块 


在 【文件 】 面 板 中 选择 要 编辑 的 网 页 sp\index.php， 双 击 将 其 打开 ,编辑 区 如 图 12-6 所 
示 。 从 code.txt 中 复制 代码 ， 并 粘贴 到 相应 位 置 ， 如 图 12-7 所 示 。 
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网 页 设计 与 网 站 建设 
本 案例 课堂 由-- 


站 | 拓 和 友 忆 站 | 回国 加 | 总 才 | 直 中 扣 | 闽 吕 


12-6 ”代码 编辑 区 


cebject ld"player” height=ra00” width-”500" clazrs 直 7CLSID:68852852-390A-11a)-8153-COCO4FT9RLAE > 
aran JIE- AntoSrart” VAL IE="— > 


oaran name orer 


N 12-7 ”添加 在 线 点 播 模块 代码 
12.3.2 ”案例 4 一 一 网 页 搜索 模块 开发 
在 浏览 网 站 时 ， 我 们 经 常 可 以 看 到 好 用 的 百度 搜索 框 或 


块 ， 能 为 网 站 的 访客 带 来 很 大 的 便利 。 网 页 搜索 模块 的 实现 
效果 如 图 12-8 所 示 。 图 12-8 ”网 页 搜索 模块 

在 【文件 】 面 板 中 选择 要 编辑 的 网 页 ss\index.php， 双 击 将 其 打开 ， 编 辑 区 如 图 12-9 所 
示 。 从 code.txt 中 复制 代码 ， 并 粘贴 到 相应 位 置 ， 如 图 12-10 所 示 。 
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12-9 ”代码 编辑 区 
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indexphp x 


12-10 ”添加 网 页 搜索 模块 代码 


12.3.3 ”案例 5 一 一 在 线 支 付 模块 开发 


在 电子 商务 发 展 的 今天 ， 网 上 在 线 支 付 应 用 越 来 越 广泛 ， 那 么 网 上 支付 是 怎么 实现 的 
呢 ? 多 数 的 银行 和 在 线 支付 服务 商都 提供 了 相应 的 接口 给 用 户 使 用 ， 我 们 要 做 的 就 是 把 接口 
中 需要 的 参数 搜集 并 提交 到 接口 页 面 中 。 

在 现在 流行 的 网 站 支付 平台 中 ， 支 付 宝 是 当仁不让 的 老大 。 现 在 我 们 来 看 一 下 在 支付 宝 
支付 过 程 中 是 怎么 搜集 数据 的 。 

支付 宝 接口 文件 可 以 从 支付 宝 商 家 用 户 中 申请 获取 ， 我 们 看 一 下 在 接口 数据 中 需要 哪些 
表单 信息 。 


"service" => "create direct pay by user", // 交 易 类 型 
"partner" => $partner, // 合 

"return url" => $return url, // 同 步 返回 

回忆 疙 于 六 => $notify rlr // 异 步 返回 

"_input charset" => $_input charset, // 字 符 集 ， 默 认为 GBK 
"subject" => "商品 名 称 "， // 商 品名 称 ， 必 填 

"body" => "商品 描述 "， // 商 品 描述 ， 必 填 

"out trade no" => date (Ymdhms), // 商 品 外 部 交易 号 ， 必 填 (保证 唯一 性 ) 
"total fee" => "00 // 商 品 单价 ， 必 填 (价格 不 能 为 0) 
"payment type" => "1", // 默 认为 1， 不 需要 修改 
"show_url" => $show_ url, // 商 品 相关 网 站 

"seller email" => $seller email // 卖 家 邮箱 ， 必 填 


在 【文件 】 面 板 中 选择 要 编辑 的 网 页 zfindex.php， 双 击 将 其 打开 ， 如 图 12-11 所 示 。 
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图 12-11 在 线 支付 模块 编辑 区 
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网 页 设计 与 网 站 建设 
案例 课堂 ~ 


这 里 我 们 根据 接口 需要 的 信息 进行 表单 布局 ， 并 通过 post 方便 地 把 表单 数据 提交 到 接口 
页 面 ， 在 接口 页 面 只 需要 使 用 $_post" 表 单字 段 名 "接收 这 些 提交 过 来 的 信息 就 行 了 ， 是 不 是 很 


简单 呢 。 
12.3.4 案例 6 一 一 在 线 客 服 模块 开发 


在 线 客服 模块 在 电子 商务 网 站 的 建设 中 可 以 说 是 必 不 可 少 的 ， 通 过 在 线 客服 模块 ， 可 以 
让 访客 很 方便 地 与 网 站 运营 的 客服 人 员 进 行 沟 通 交 流 ， 如 图 12-12 所 示 。 


图 12-12 ”在线 客服 模块 
在 【文件 】 面 板 中 选择 要 编辑 的 网 页 qq\index.php， 双 击 将 其 打开 。 切 换 到 代码 窗口 ， 可 
以 看 到 第 一 行为 qq 模块 调用 方式 ， 如 图 12-1 13 所 示 。 


index. shp X 
了 


CL pho 


| [RR ] 拆 分 | 光 汪 | 实时 视 目 | 区. 总 中 D2 EC 村 i 
nD 


a cm> 
we I Chead> 
12-13 ”调用 QQ 的 代码 
接着 打开 模板 文件 qq.php， 找 到 修改 qq 号 码 的 地 方 ， 在 实际 应 用 中 在 这 里 修改 相应 属性 


值 就 可 以 了 ， 如 图 12-14 所 示 。 


$aqr 

Svebt it 1e=" WE 
$on=“ 在 线 ， 即 时 交谈 “ ;// 在 
$off= “不 在 线 ， 请 留言 " 


12-14 ”修改 代码 


12.3.5 “案例 7 一 一 天 气 预 报 模块 开发 
天 气 预报 模块 对 一 些 办 公 性 质 的 网 站 来 说 也 是 很 有 用 的 ， 它 可 以 通过 一 些 天 气 网 站 提供 
的 相关 代码 进行 实现 。 下 面 一 段 代码 是 由 中 国 天 气 网 提供 的 调用 代码 。 


伟 21 


4 们 | 苹 局 


<iframe src="http://m.weather.com.cn/m/pnl2/weather.htm " width="245" 

height="110" marginwidth="0" marginheight="0" hspace="0" vspace="0" 

frameborder="0" scrolling="no"></iframe> 

在 使 用 的 时 候 我 们 只 需要 把 这 段 代码 放 入 需要 设置 的 地 方 就 行 了 。 

在 【文件 】 面 板 中 选择 要 编辑 的 网 页 tqindex.php， 双 击 将 其 打开 。 切 换 到 拆 分 窗口 ， 如 
图 12-15 所 示 。 
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图 12-15 ”天气 预 报 模块 编辑 区 
添加 完 天 气 预报 模块 的 代码 后 ， 就 可 以 保存 该 网 页 ， 然 后 在 正 浏览 器 中 预览 网 页 ， 可 以 
看 到 天 气 预 报 模块 的 显示 效果 ， 如 图 12-16 所 示 。 


广告 管理 系统 演示 


内 容 为 网 结 收 集 ， 广 告 内 容 并 经 我 站 数 运 ， 妇 有 不 实 ， 本 让 不 信任 业 寓 任 ! ! ! 
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12-16 天气 预报 模块 预览 效果 


12.4” 跟 我 练 练 手 
12.4.1 练习 目标 
掌握 在 线 点 播 、 网 页 搜索 、 在 线 支付 、 在 线 客服 、 天 气 预 报 模块 的 使 用 。 
12.4.2 上 机 练习 
练习 1: 完成 在 线 点 播 实例 。 


练习 2: 完成 网 页 搜索 实例 。 
练习 3: 完成 在 线 支 付 实例 。 
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网 页 设计 与 网 站 建设 
案例 课堂 一 


练习 4: 完成 在 线 客服 实例 。 
练习 5: 完成 天 气 预报 实例 。 


12.5 高 手 甜 点 


甜点 1: include 与 require 的 区 别 是 什么 


require 从 字面 理解 就 是 “要 求 ”， 所 以 是 必须 执行 ， 并 且 在 其 他 输出 之 前 执行 ， 如 果 该 
文件 执行 错误 ， 整 个 页 面 就 会 出 错 无 法 继续 执行 ， 而 在 实际 编程 中 会 遇 到 一 个 页 面 调用 多 个 
页 面 的 情况 ， 可 能 出 现 嵌 套 调 用 、 重 复 调用 ， 所 以 就 要 用 到 require_once 以 避免 重复 调用 引起 
的 错误 。 例 如 连接 数据 库 经 常用 到 的 conn.php 页 面 。 

\ include 是 在 一 个 程序 执行 到 一 定 的 时 候 包含 进 另 一 个 文件 的 程序 ， 相 当 于 将 它 作为 当前 
的 一 部 分 。 

require 和 include 都 是 调用 另外 的 页 面 程 序 ， 但 require 是 强制 执行 ，include 可 以 选择 执行 。 

甜点 2: RSS 模块 是 什么 

RSS 是 站 点 用 来 和 其 他 站 点 之 间 共 享 内 容 的 简易 方式 (也 叫 聚 合 内 容 )。RSS 使 用 XML 作 
为 彼此 共享 内 容 的 标准 方式 。 它 能 让 别人 很 容易 地 发 现 你 已 经 更 新 了 你 的 站 点 ， 并 让 人 们 很 


容易 地 追踪 他 们 阅读 的 所 有 信息 。 所 以 在 自己 的 网 站 上 加 上 这 个 模块 ， 能 提高 用 户 对 网 站 的 
关注 。 一 个 完整 的 RSS 模块 由 两 个 部 分 组 成 : 一 是 信息 提交 ; 二 是 更 新 RSS 文件 。 
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网 页 美化 布局 篇 


和 第 13 章 读 懂 样 式 表 密码 一 一 使 用 CSS 样式 表 美 化 
网 页 

和 第 14 章 网 页 盒子 模型 一 一 网 页 布局 的 盒子 技术 

和 第 15 章 ”页面 布局 的 黄金 搭档 一 一 CSS+DIV 布局 典 
型 范例 
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面 内 容 分 开 ， 从 而 实现 一 个 CSS 样式 表 美 化 多 个 网 页 内 容 的 操作 。 


技术 可 以 对 网 页 进行 精细 的 页 面 美 化 。 在 进行 页 面 美化 时 ， 可 以 将 CSS 规则 与 页 
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13.1 ， 认识 CSS 


现在 ， 网 页 的 排版 格式 越 来 越 复杂 ， 样 式 也 越 来 越 多 。 有 了 CSS 样式 ， 很 多 美观 的 效果 
都 可 以 实现 ， 应 用 CSS 样式 制作 出 的 网 页 会 给 人 一 种 条 理 清 晰 、 格 式 漂 亮 、 布 局 统一 的 感 
觉 ， 加 上 多 种 字体 的 动态 效果 ， 会 使 网 页 变 得 更 加 生动 有 趣 。 


13.1.1 CSS 概述 


CSS(Cascading Style SheeD， 称 为 层 登 样式 表 ， 也 可 以 称 为 CSS 样式 表 或 样式 表 ， 其 文件 
扩展 名 为 .css。CSS 是 用 于 增强 或 控制 网 页 样式 ， 并 人 允许 将 样式 信息 与 网 页 内 容 分 离 的 一 种 标 
记性 语言 。 

引用 样式 表 的 目的 是 将 “网 页 结构 代码 ”和 “网 页 样式 风格 代码 ”分 离开 ， 从 而 使 网 页 
设计 者 可 以 对 网 页 布局 进行 更 多 的 控制 。 利 用 样式 表 ， 可 以 使 整个 站 点 上 的 所 有 网 页 都 指向 
某 个 CSS 文件 ， 设 计 者 只 需要 修改 CSS 文件 中 的 某 一 行 ， 整 个 网 页 上 对 应 的 样式 都 会 随 之 发 
生 改 变 。 


13.1.2 ”CSS 的 作用 


CSS 样式 可 以 一 次 对 若干 个 文档 的 样式 进行 控制 ， 当 CSS 样式 更 新 后 ， 所 有 应 用 了 该 样 
式 的 文档 都 会 自动 更 新 。 可 以 说 ，CSS 在 现代 网 页 设计 中 是 必 不 可 少 的 工具 之 一 。 
CSS 的 优越 性 有 以 下 几 点 。 


1. 分 离 了 格式 和 结构 


HTML 并 没有 严格 地 控制 网 页 的 格式 或 外 观 ， 仅 定义 了 网 页 的 结构 和 个 别 要 素 的 功能 ， 
其 他 部 分 让 浏览 器 自己 决定 应 该 让 各 个 要 素 以 何 种 形式 显示 。 但 是 ， 随 便 地 使 用 HTML 样式 
会 导致 代码 混乱 ， 编 码 会 变 得 腾 肿 不 堪 。 

CSS 解决 了 这 个 问题 ， 它 通过 将 定义 结构 的 部 分 和 定义 格式 的 部 分 分 离 ， 能 够 对 页 面 的 
布局 施加 更 多 的 控制 ， 也 就 是 把 CSS 代码 独立 出 来 ， 从 另 一 个 角度 来 控制 页 面 外 观 。 


2.， 控制 页 面 布局 


HTML 中 的 <font size> 代 码 能 调整 字号 ， 表 格 标记 可 以 生成 边 距 。 但是， 总 体 上 的 控制 却 
很 有 限 ， 比 如 它 不 能 精确 地 生成 80 像素 的 高 度 ， 不 能 控制 行 间距 或 字 间 距 ， 不 能 在 屏幕 上 精 
确 地 定位 图 像 的 位 置 ， 而 CSS 就 可 以 使 这 一 切 都 成 为 可 能 。 


3. 制作 出 更 小 、 下 载 更 快 的 网 页 


CSS 只 是 简单 的 文本 ， 就 像 HTML 那样 ， 它 不 需要 图 像 ， 不 需要 执行 程序 ， 不 需要 插 
件 ， 不 需要 流 式 。 有 了 CSS 之 后 ， 以 前 必须 求助 于 GIF 格式 的 ， 现 在 通过 CSS 就 可 以 实现 。 
此 外 ， 使 用 CSS 还 可 以 减少 表格 标记 及 其 他 加 大 HIML 体积 的 代码 ， 减 少 图 像 用 量 ， 从 而 减 


小 文件 的 大 小 。 

4. 便于 维护 及 更 新 大 量 的 网 页 

如 果 没 有 CSS， 要 更 新 整个 站 点 中 所 有 主体 文本 的 字体 ， 就 必须 一 页 一 页 地 修改 网 页 。 
CSS 则 是 将 格式 和 结构 分 离 ， 利 用 样式 表 可 以 将 站 点 上 所 有 的 网 页 都 指向 单一 的 一 个 CSS 文 
件 ， 只 要 修改 CSS 文件 中 的 某 一 行 ， 整 个 站 点 就 都 会 随 之 发 生变 动 。 

5.， 使 浏览 器 成 为 更 友好 的 界面 


CSS 的 代码 有 很 好 的 兼容 性 ， 比 如 丢失 了 某 个 插件 时 不 会 发 生 中 断 ， 或 者 使 用 低 版 本 的 
浏览 器 时 代码 不 会 出 现 杂乱 无 章 的 情况 。 只 要 是 可 以 识别 CSS 的 浏览 器 ， 就 可 以 应 用 CSS。 


13.1.3 基本 CSS 语法 


CSS 样式 表 由 若干 条 样式 规则 组 成 ， 这 些 样式 规则 可 以 应 用 到 不 同 的 元 素 或 文档 来 定义 
它们 显示 的 外 观 。 每 一 条 样式 规则 由 三 个 部 分 构成 : 选择 符 (selector)、 属 性 (property) 和 属性 
值 (value)， 基 本 格式 如 下 。 


selector{property:value} 

(1) selector 选择 符 可 以 采用 多 种 形式 ， 可 以 为 文档 中 的 HTML 标签 ， 如 <body>、<table>、 
<p> 等 ， 也 可 以 是 XML 文档 中 的 标签 。 

(2) property 属性 代表 选择 符 指定 的 标签 所 包含 的 属性 。 

(3) value 指定 了 属性 的 值 。 如 果 定 义 选择 符 的 多 个 属性 ， 则 属性 和 属性 值 为 一 组 ， 组 与 
组 之 间 用 分 号 G) 隔 开 ， 基 本 格式 如 下 。 


selector{propertyl:valuel; property2:value2;..} 


下 面 给 出 一 条 样式 规则 。 


p{color:red} 


该 样式 规则 的 选择 符 为 p， 为 段落 标签 <p> 提 供 样式 ，color 为 指定 文字 的 颜色 属性 ，red 
为 属性 值 。 此 样式 表示 标签 <p> 指 定 的 段落 文字 为 红色 。 
如 果 要 为 段落 设置 多 种 样式 ， 则 可 以 使 用 如 下 语句 。 


p{font-family:" 素 书 "; color:red; font-size:40px; font-weight:bold} 


13.2 ”使 用 CSS 样式 美化 网 页 


在 使 用 CSS 样式 的 属性 美化 网 页 元 素 之 前 ， 需 要 先 定 义 CSS 样式 的 属性 ，CSS 样式 常用 
的 属性 包括 字体 、 文 本 、 背 景 、 链 接 、 列 表 等 。 


13.2.1 案例 1 一 一 使 用 字体 样式 美化 文字 
Css 样式 的 字体 属性 用 于 定义 文字 的 字体 、 大 小 、 粗 细 的 表现 等。 
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font 统一 定义 字体 的 所 有 属性 ， 具 体 如 下 。 


font-family: 定义 使 用 的 字体 。 

font-size: 定义 字体 大 小 。 

font-style: 定义 斜体 字 。 

font-variant: 定义 小 型 的 大 写字 母 字体 ， 此 属性 对 中 文 无 意义 。 
font-weight: 定义 字体 的 粗细 。 


OOOOO 


1.，font-family 属性 


下 面 通过 一 个 示例 来 认识 font-family。 
可 以 定义 多 种 字体 连 在 一 起 使 用 ， 如 中 文 的 宋体 、 英 文 的 Arial 体 ， 字 体 之 间 用 逗号 分 
代码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS font-family 属性 示例 </title> 
<style type="text/css" media="all"> 
p#songti{font-family:" 宋 体 ";} 
p#Arial{font-family:Arial;} 
p#all{font-family:" 宋 体 ",Arial;} 
</style> 

</head> 

<body> 

<p id="songti"> 使 用 宋体 .</p> 

<p id="Arial"> 使 用 arial 字体 .</p> 
</body> 

</html> 


2.，font-size 属性 
中 文 常用 的 字体 大 小 是 12px。 文 章 的 标题 等 应 该 使 用 大 字体 ， 但 此 时 不 应 使 用 字体 大 小 


属性 ， 应 使 用 <hl>、<h2> 等 HTML 标签 。 


HTML 的 big、small 标记 定义 了 大 字体 和 小 字体 的 文字 ， 此 标记 已 经 被 W3C 抛弃 ， 真 


正 符合 标准 网 页 设计 的 显示 文字 大 小 的 方法 是 使 用 font-size CSS 属性 。 在 浏览 器 中 可 以 使 用 
Ctrl++ 组 合 键 增 大 字体 ，Ctrl+- 组 合 键 缩小 字体 。 


下 面 通过 一 个 示例 来 认识 font-size， 代 码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Css font-size 属性 绝对 字体 尺寸 示例 </title> 
<style type="text/css" media="all"> 
p{font-size:12px;} 
p#xxsmall{font-size:xx-small;} 
p#xsmall{font-size:x-small;} 
p#small{font-size:small;} 
p#medium{font-size:medium;} 
p#xlarge{font-size:x-large; } 
p#xxlarge{font-size:xx-large;} 


</style> 

</head> 

<body> 

<p id="xxsmall">font-size 中 的 xxsmall 字体 </p> 
<p id="xsmall">font-size 中 的 xsmall 字体 </p> 
<p id="small">font-size 中 的 small 字体 </p> 

<p id="medium">font-size 中 的 medium 字体 </p> 
<p id="xlarge">font-size 中 的 xlarge 字体 </p> 
<p id="xxlarge">font-size 中 的 xxlarge 字体 </p> 
</body> 

</html> 


3. font-style 属性 


网 页 中 的 字体 样式 都 是 不 固定 的 ， 用 户 可 以 使 用 font-style 来 实现 字体 样式 的 设置 ， 其 属 
性 如 下 。 

口 normal: 正常 的 字体 ， 即 浏览 器 的 默认 状态 。 

口 。italic: 斜体 。 对 于 没有 斜体 变量 的 特殊 字体 ， 将 应 用 oblique。 

口 oblique: 倾斜 的 字体 ， 即 没有 斜体 变量 。 

下 面 通过 一 个 示例 来 认识 font-style， 代 码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS font-style 属性 示例 </title> 

<style type="text/css" media="all"> 

p#normal{font-style:normal;} 

p#italic{font-style:italic;} 

p#oblique{font-style:oblique;} 

</style> 

</head> 

<body> 

<p id="normal"> 正 常 字体 .</p><p id="italic"> 斜 体 .</p><p id="oblique"> 斜 体 .</p> 
</body> 

</html> 
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4.，font-variant 属性 


在 网 页 中 常常 可 以 碰 到 需要 输入 内 容 的 地 方 ， 如 果 输 入 汉字 的 话 是 没 问题 的 ， 可 是 当 需 
要 输入 英文 时 ， 那 么 它 的 大 小 写 是 令 我 们 最 头疼 的 问题 。 在 CSS 中 可 以 通过 font-variant 的 
几 个 属性 来 实现 输入 时 不 受 大 小 写 限 制 的 功能 ， 其 属性 如 下 。 

口 normal: 正常 的 字体 ， 即 浏览 器 的 默认 状态 。 

口 small-caps: 定义 小 型 的 大 写字 母 。 

下 面 通过 一 个 示例 来 认识 font-variant， 代 码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Css font-variant 属性 示例 </title> 

<style type="text/css" media="all"> 
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p#small-caps{font-variant:small-caps;} 
p#uppercase{text-transform:uppercase;} 

</style> 

</head> 

<body> 

<p id="small-caps">The quick brown fox jumps over the lazy dog.</p> 
<p id="uppercase">The quick brown fox jumps over the lazy dog.</p> 
</body> 

</html> 


5.，font-weight 属性 
font-weight 属性 用 来 定义 字体 的 粗细 ， 其 属性 如 下 。 


口 normal: 正常 ， 等 同 于 400。 

口 bold: 粗 体 ， 等 同 于 700。 

口 bolder: 更 粗 。 

口 lighter: 更 细 。 

口 100|200|300|400|500|600|700|800|900: 字体 粗细 的 绝对 值 。 
下 面 通过 一 个 示例 来 认识 font-weight， 代 码 如 下 。 

<html> 

<head> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS font-weight 属性 示例 </title> 

<style type="text/css" media="all"> 

p#normal 

{font-weight: normal;} 

p#bold{font-weight: bold;} 

p#bolder{font-weight: bolder;} 

p#lighter{font-weight: lighter;} 

p#100{font-weight: 100;} 

</style> 

</head> 

<body> 

<p id="normal">font-weight: normal</p><p id="bold">font-weight: bold</p> 
<p id="bolder">font-weight: bolder</p> 

<p id="lighter">font-weight: lighter</p><p id="100">font-weight: 100</p> 
</body> 

</html> 


13.2.2 ”案例 2 一 一 使 用 文本 样式 美化 文本 


CSS 样式 的 文本 属性 用 于 定义 文字 、 空 格 、 单 词 、 段 落 的 样式 。 

文本 属性 如 下 。 

口 letter-spacing 属性 : 定义 文本 中 字母 的 间距 (中 文 为 文字 的 间距 )。 

口 ”word-spacing 属性 : 定义 以 空格 间隔 文字 的 间距 (就 是 空格 本 身 的 宽度 )。 
口 text-decoration 属性 : 定义 文本 是 否 有 下 划 线 以 及 下 划 线 的 方式 。 

口 ”text-transform 属性 : 定义 文本 的 大 小 写 状 态 ， 此 属性 对 中 文 无 意义 。 


口 ”text-align 属性 : 定义 文本 的 对 齐 方式 。 
口 textindent 属性 : 定义 文本 的 首 行 缩 进 (在 首 行文 字 前 插入 指定 的 长 度 )。 


1.，letter-spacing 属性 


该 属性 在 应 用 时 有 如 下 两 种 情况 。 

口 normal: 默认 间距 (主要 是 根据 用 户 所 使 用 的 浏览 器 等 设备 而 定 )。 
口 “<length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 
下 面 通过 一 个 示例 来 认识 letter-spacing， 代 码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS letter-spacing 属性 示例 </title> 

<style type="text/css" media="all"> 

-ls3px{letter-spacing: 3px;} 

.lsn3px{letter-spacing: -3px;} 

</style> 

</head> 

<body> 

<p class="]ls3px"> 

<strong><ahref="http://www.dreamdu.com/css/property letter-spacing/">letter- 
spacing</a> 示 例 :</strong> 

<p>All i have to do, is learn CSS . (仔细 看 是 字母 之 间 的 距离 , 不 是 空格 本 身 的 宽度 。 )</p> 
</p> 

<p> 

<strong><ahref="http://www.dreamdu.com/css/property letter-spacing/">letter- 
spacing</a> 示 例 :</strong> 

<p class="1sn3px">R11 i have to do, is learn CSS.</p> 

</p> 

</body> 

</html> 
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2. word-spacing 属性 


该 属性 在 应 用 时 有 如 下 两 种 情况 。 

口 normal: 默认 间距 ， 即 浏览 器 的 默认 间距 。 

口 “<length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 
下 面 通过 一 个 示例 来 认识 word-spacing， 代 码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS word-spacing 属性 示例 </title> 

<style type="text/css" media="all"> 

.ws30{word-spacing: 30px;} 

.wsn30{word-spacing: -1l0px;} 

</style> 

</head> 

<body><p><strong>word-spacing 示例 :</strong> 

<p class="ws30">R11 i have to do, is learn CSS.</p></p><p> 
<strong>word-spacing 示例 :</strong><p class="wsn30">All i have to do, is learn 
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Css.</p> 
</p> 
</body> 
</html> 


3.text-decoration 属性 


该 属性 在 应 用 时 有 如 下 4 种 情况 。 

underline: 定义 有 下 划 线 的 文本 。 

overline: 定义 有 上 划 线 的 文本 。 

line-through: 定义 直线 穿 过 文本 。 

blink: 定义 闪烁 的 文本 。 

下 面 通过 一 个 示例 来 认识 text-decoration， 代 码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CcsSs text-decoration 属性 示例 </title> 

<style type="text/css" media="all"> 

p#line-through{text-decoration: line-through;} 

</style> 

</head> 

<body> 

<p id="line-through"> 示 例 <a href="#">CSS 教程 </a>, <strong><a 
href="#">text-decoration</a></strong> 示 例 ,属性 值 为 1ine-through 中 划 线 .</p> 
</body> 

</html> 
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4.text-transform 属性 


该 属性 在 应 用 时 有 如 下 4 种 情况 。 

口 capitalize: 首 字 母 大 写 。 

口 uppercase: 将 所 有 设 定 此 值 的 字母 变 为 大 写 。 
口 lowercase: 将 所 有 设 定 此 值 的 字母 变 为 小 写 。 
口 none: 正常 无 变化 ， 即 输入 状态 。 

下 面 通过 一 个 示例 来 认识 text-transform， 代 码 如 下 。 
<html> 

<head> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS text-transform 属性 示例 </title> 

<style type="text/css" media="all"> 

p#capitalize{text-transform: capitalize; } 
p#uppercase{text-transform: uppercase; } 
p#lowercase{text-transform: lowercase; } 

</style> 

</head> 

<body> 

<p id="capitalize">hello world</p><p id="uppercase">hello world</p> 
<p id="lowercase">HELLO WORLD</p> 


a 


</body> 
</html> 


5.，text-align 属性 


该 属性 在 应 用 时 有 如 下 4 种 情况 。 

口 left， 对 于 当前 块 的 位 置 为 左 对 齐 。 

口 right: 对 于 当前 块 的 位 置 为 右 对 齐 。 

口 center: 对 于 当前 块 的 位 置 为 居中 。 

口 justify: 对 齐 每 行 的 文字 。 

下 面 通过 一 个 示例 来 认识 text-align， 代 码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS text-align 属性 示例 </title> 
<style type="text/css" media="all"> 
p#left{text-align: left; } 

</style> 

</head> 

<body> 

<p id="left">left 左 对 齐 </p> 

</body> 

</html> 
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6.，text-indent 属性 


该 属性 在 应 用 时 有 如 下 2 种 情况 。 

口 “<length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 
口 ”<percentage>: 百分比 表示 法 。 

下 面 通过 一 个 示例 来 认识 text-indent， 代 码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS text-indent 属性 示例 </title> 

<style type="text/css" media="all"> 

p#indent {text-indent:2em;top:10px;} 

p#unindent {text-indent:-2em;top:210px;} 

p{width:150px;margin:3em;} 

</style> 

</head> 

<body> 

<p id="indent"> 示 例 <a href="#">CSS 教程 </a>, <strong><a 
href="#">text-indent</a></strong> 示 例 , 正 值 向 后 缩 , 负 值 向 前 进 .text-indent 属性 可 以 
定义 首 行 的 缩 进 ,是 我 们 经 常 使 用 到 的 css 属性 .</p> 

<p id="unindent"> 示 例 <a href="#">CSS 教程 </a>, <strong><a 
href="#">text-indent</a></strong> 示 例 , 正 值 向 后 缩 , 负 值 向 前 进 .</p> 

</body> 

</html> 
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13.2.3 ”案例 3 一 一 使 用 背景 样式 美化 背景 


文字 颜色 可 以 使 用 color 属性 ， 但 是 包含 文字 的 p 段落 、div 层 、page 页 面 等 的 颜色 与 背 
景 图 像 则 使 用 背景 等 属性 ， 具 体 如 下 。 
background-color: 背景 色 ， 定 义 背 景 颜色 。 
background-image: 定义 背景 图 像 。 
background-repeat: 定义 背景 图 像 的 重复 方式 。 
background-position: 定义 背景 图 像 的 位 置 。 
background-attachment: 定义 背景 图 像 随 滚动 轴 的 移动 方式 。 


1.background-color 属性 


在 CSS 中 可 以 定义 背景 颜色 ， 内 容 没 有 覆盖 到 的 地 方 就 按照 设置 的 背景 颜色 显示 ， 其 
值 如 下 。 

口 “<color>: 颜色 表示 法 ， 可 以 是 数值 表示 法 ， 也 可 以 是 颜色 名 称 。 

口 transparent: 背景 色 透 明 。 

下 面 通过 一 个 示例 来 认识 background-color。 

定义 网 页 的 背景 使 用 绿色 ， 内 容 为 白字 黑 底 ， 示 例 代 码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS background-color 属性 示例 </title> 
<style type="text/css" media="all"> 
body{background-color:green;} 
hl{color:white;background-color:black;} 
</style> 

</head> 

<body> 

<h1> 白 字 黑 底 </h1> 

</body> 

</html> 
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2. background-image 属性 


在 CSS 中 还 可 以 设置 背景 图 像 ， 其 值 如 下 。 

口 <uri>: 使 用 绝对 地 址 或 相对 地 址 指定 背景 图 像 。 

口 none: 将 背景 设置 为 无 背景 状态 。 

下 面 通过 一 个 示例 来 认识 background-image， 代 码 如 下 。 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSsS background-image 属性 示例 </title> 

<style type="text/css" media="all"> 
.para{background-image:none; width:200px; height:70px;} 
-div{width:200px; color:#FFF; font-size:40px; 
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font-weight:bold;height:200px;background-image:url (flowerl.jpg);} 
</style> 

</head> 

<body> 

<div class="para">div 中 没有 背景 图 像 </div> 

<div class="div">div 中 有 背景 图 像 </div> 

</body> 

</html> 


3. background-repeat 属性 


在 默认 情况 下 ， 图 像 会 自动 向 水 平和 竖 直 两 个 方向 平 铺 。 如 果 不 希 望 平 铺 ， 或 者 希望 沿 
着 一 个 方向 平 铺 ， 可 以 使 用 background-repeat 属性 实现 。 该 属性 可 以 设置 为 以 下 4 种 平 铺 
方式 。 

口 repeat: 平 铺 整个 页 面 ， 左 右 与 上 下 。 

口 repeat-x: 在 x 轴 上 平 铺 ， 左 右 。 

口 repeat-y: 在 y 轴 上 平 铺 ， 上 下 。 

口 ”no-repeat: 当 背 景 大 小 比 所 要 填充 背景 的 块 小 时 ， 图 像 不 重复 。 

下 面 通过 一 个 示例 来 认识 background-repeat， 代 码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS background-repeat 属性 示例 </title> 

<style type="text/css" media="all"> 
body{background-image:url('images/small.jpg');background-repeat:no-repeat;} 
p{background-image:url('images/small.jpg') ;background-repeat:repeat-— 
y’?backgroun 
d-position:right;top:200px;left:200px;width:300px;height:300px;border:1px 
solid 

black; margin-left:150px;} 

</style> 

</head> 

<body> 

<p> 示 例 css 教程 ，repeat-Y 竖 着 重复 的 背景 (div 的 右 侧 ) .</p> 

</body> 

</html> 
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4. background-position 属性 


将 标题 居中 或 者 右 对 齐 可 以 使 用 background-position 属性 ， 其 值 如 下 。 
1) 水 平方 向 
口 left:， 对 于 当前 填充 背景 位 置 居 左 。 

口 ”center: 对 于 当前 填充 背景 位 置 居中 。 
口 right: 对 于 当前 填充 背景 位 置 居 右 。 
2) 垂直 方向 
口 top: 对 于 当前 填充 背景 位 置 居 上 。 

口 ”center: 对 于 当前 填充 背景 位 置 居 中 。 
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口 bottom: 对 于 当前 填充 背景 位 置 居 下 。 
3) 垂直 与 水 平 的 组 合 ， 代 码 如 下 。 


ES 
x -poy posy 


下 面 通过 一 个 示例 来 认识 background-position， 代 码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS background-position 属性 示例 </title> 

<style type="text/css" media="all"> 
body{background-image:url('images/small.jpg') ;background-repeat:no-repeat;} 
p{background-image:url('images/small.jpg') ;background-position:right 
bottom ;background-repeat:no-repeat;border:1lpx solid 
black;width:400px;height:200px; margin-left:130px;} 
div{background-image:url('images/small.jpg');background-position:50% 
20% ;background-repeat:no-repeat;border:lpx solid 
black;width:400px;height:150px;} 

</style> 

</head> 

<body> 

<p>p 段落 中 右 下 角 显 示 禁 色 的 点 .</p> 

<div>div 中 距 左 上 角 x 轴 50%,y 轴 20% 的 位 置 显示 橙色 的 点 .</div> 

</body> 

</html> 


5. background-attachment 属性 


background-attachment 属性 用 于 设置 或 检索 背景 图 像 是 随 对 象 内 容 移 动 还 是 
如 下 。 

口 scroll， 随 着 页 面 的 滚动 ， 背 景 图 像 将 移动 。 

口 fixed: 随 着 页 面 的 滚动 ， 背 景 图 像 不 会 移动 。 

下 面 通过 一 个 示例 来 认识 background-attachment， 代 码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSsS background-attachment 属性 示例 </title> 

<style type="text/css" media="all"> 

body{background:url ('images/list-orange.png');background-attachment :fixed; 
backg round-repeat:repeat-x;background-position:center 
center;position:absolute;height:400px;} 

</style> 

</head> 

<body> 

<p> 拖 动 滚动 条 , 并 且 注 意 中 间 有 一 条 橙色 线 并 不 会 随 滚动 条 的 下 移 而 上 移 .</p> 

</body> 

</html> 
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13.2.4 案例 4 一 一 使 用 链接 样式 美化 链接 


在 HTML 语言 中 ， 超 链接 是 通过 <a> 标 签 来 实现 的 ， 链 接 的 具体 地 址 则 是 利用 <a> 标 签 的 
href 属性 设置 的 ， 代 码 如 下 。 


<a href="http://www.baidu.com"> 链 接 文本 </a> 


在 浏览 器 默认 的 浏览 方式 下 ， 超 链接 统一 为 蓝 色 并 且 有 下 划 线 ， 被 单 击 过 的 超 链接 则 为 
紫色 并 且 也 有 下 划 线 。 这 种 最 基本 的 超 链接 样式 现在 已 经 无 法 满足 广大 设计 师 的 需求 。 通 过 
CSS 可 以 设置 超 链接 的 各 种 属性 ， 而 且 通过 伪 类 别 还 可 以 制作 很 多 动态 效果 。 首 先 用 最 简单 
的 方法 去 掉 超 链接 的 下 划 线 ， 代 码 如 下 。 

/* 超 链接 样式 * / 

a{text-decoration:none; margin-left:20px;} /* 去 掉 下 划 线 */ 

可 以 制作 动态 效果 的 CSS 伪 类 别 属 性 如 下 。 

口 alink: 超 链接 的 普通 样式 ， 即 正常 浏览 状态 的 样式 。 

口 avisited:， 被 单 击 过 的 超 链接 的 样式 。 

口 。 a:hover: 鼠标 指针 经 过 超 链 接 上 时 的 样式 。 

口 aactive: 在 超 链接 上 单 击 ， 即 “当前 激活 ”时 超 链 接 的 样式 。 


13.2.5 “案例 5 一 一 使 用 列表 样式 美化 列表 


CSS 列表 属性 可 以 改变 HTML 列表 的 显示 方式 。 列 表 的 样式 通常 使 用 list-style-type 属性 
来 定义 ，list-style-image 属性 定义 列表 样式 的 图 像 ，list-style-position 属性 定义 列表 样式 的 位 
置 ，list-style 属性 统一 定义 列表 样式 的 几 个 属性 。 

通常 的 列表 主要 采用 <ul> 或 者 <ol> 标 签 ， 然 后 配合 <li> 标 签 罗列 各 个 项 目 。CSS 列表 有 如 
表 13-1 所 示 的 几 个 常见 属性 。 


表 13-1 CSS 列表 的 常见 属性 


设置 列表 项 目 相 关内 容 
设置 或 检索 作为 对 象 的 列表 项 标记 的 图 像 

设置 或 检索 作为 对 象 的 列表 项 标记 如 何 根据 文本 排列 
设置 或 检索 对 象 的 列表 项 所 使 用 的 预 设 标记 


list-style 


list-style-image 


list-style-position 


1.，list-style-image 属性 


list-style-image 用 于 设置 或 检索 作为 对 象 的 列表 项 标记 的 图 像 ， 其 值 如 下 。 
口 uri: 一 般 是 一 个 图 像 的 网 址 。 

口 none: 不 指定 图 像 。 

示例 代码 如 下 。 


入 
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<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS list-style-image 属性 示例 </title> 

<style type="text/css" media="all"> 

ul{list-style-image: url("images/list-orange.png");} 
</style> 

</head> 

<body> 

<ul> 

<1i> 使 用 图 片 显示 列表 样式 </1i> 

<1i> 本 例 中 使 用 了 1ist-orange.png 图 片 </1i> 

<1i> 我 们 还 可 以 使 用 1ist-green.png top.png 或 up.png 图 片 </1i> 
<1i> 大 家 可 以 尝试 修改 下 面 的 代码 </1i> 

</ul> 

</body> 

</html> 


2.，list-style-position 属性 


list-style-position 用 于 设置 或 检索 作为 对 象 的 列表 项 标记 如 何 根据 文本 排列 ， 其 值 如 下 。 
口 inside: 列表 项 标记 放置 在 文本 以 内 ， 且 环绕 文本 根据 标记 对 齐 。 

口 outside: 列表 项 标记 放置 在 文本 以 外 ， 且 环绕 文本 不 根据 标记 对 齐 。 

示例 代码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS list-style-position 属性 示例 </title> 

<style type="text/css" media="all"> 
ul#inside{list-style-position: inside;list-style-image: 
url("images/list-orange.png");} 
ul#outside{list-style-position: outside;list-style-image: 
url("images/list-green.png");} 

p{padding: 0;margin: 0;} 

li{border:lpx solid green;} 

</style> 

</head> 

<body> 

<p> 内 部 模式 </p> 

<ul id="inside"> 

<1i> 内 部 模式 inside</1i> 

<1i> 示 例 XHTML 教程 .</1i> 

<1i> 示 例 css 教程 .</1i> 

<1i> 示 例 JAVASCRIPT 教程 .</1i> 

</ul> 

<p> 外 部 模式 </p> 

<ul id="outside"> 

<1i> 外 部 模式 outside</1i> 

<1i> 示 例 XHTML 教程 .</1i> 

<1i> 示 例 css 教程 .</1i> 

<1i> 示 例 JAVASCRIPT 教程 .</1i> 

</ul> 


ea 


</body> 
</html> 


3.list-style-type 属性 
list-style-type 用 于 设置 或 检索 对 象 的 列表 项 所 使 用 的 预 设 标记 ， 其 值 如 下 。 


口 disc: 点 。 

口 circle: 

口 “square: 正方 形 。 

口 ”decimal: 数字 。 

口 none: 无 (取消 所 有 的 list 样式 )。 
示例 代码 如 下 。 

<html> 

<head> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSsSs list-style-type 属性 示例 </title> 
<style type="text/css" media="all"> 
ul{list-style-type: disc;} 

</style> 

</head> 

<body> 

<ul> 

<1i> 正 常 模式 </1i> 

<1i> 示 例 XHTML 教程 .</1i> 

<1i> 示 例 css 教程 .</1i> 

<1i> 示 例 JAVASCRIPT 教程 .</1i> 

</ul> 

</body> 

</html> 
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13.2.6 ”案例 6 一 一 使 用 区 块 样式 美化 区 块 


块 级 元 素 就 是 一 个 方块 ， 像 段落 一 样 ， 默 认 占据 一 行 位 置 。 内 联 元 素 又 称 行内 元 素 。 顾 
名 思 义 ， 它 只 能 放 在 行内 ， 就 像 一 个 单词 一 样 不 会 造成 前 后 换行 ， 起 辅助 作用 。 一 般 的 块 级 
元 素 包括 段落 <p>、 标 题 <hl><h2>、 列 表 <ul><ol><li>、 表 格 <table>、 表 单 <formm>、DIV<div> 
和 BODY<body> 等 。 内 联 元 素 包 括 表单 元 素 <input>、 超 链接 <a>、 图 像 <img>、<span> 等 。 块 
级 元 素 的 显著 特点 是 : 它 都 是 从 一 个 新 行 开 始 显示 ， 而 且 其 后 的 元 素 也 需要 另 起 一 行 显示 。 
下 面 通过 一 个 示例 来 看 一 下 块 级 元 素 与 内 联 元 素 的 区 别 ， 代 码 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSsS 1ist-style-type 属性 示例 </title> 

<style type="text/css" media="all"> 

ul{list-style-type: disc;} 

img{width:100px; height:70px;} 

</style> 

</head> 
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<body> 

<p> 标 签 不 同行 : </p> 
<div><imgsrc="flower.jpg" /></div> 
<div><imgsrc="flower.jpg" /></div> 
<div><imgsrc="flower.jpg" /></div> 
<p> 标 签 同一 行 : </p> 
<span><imgsrc="flower.jpg" /></span> 
<span><imgsrc="flower.jpg" /></span> 
<span><imgsrc="flower.jpg" /></span> 
</body> 

</html> 


在 前 面 示例 中 ，3 个 <div> 元 素 各 占 一 行 ， 相 当 于 在 它 之 前 和 之 后 各 插入 了 一 个 换行 ， 而 
内 联 元 素 <span> 没 对 显示 效果 造成 任何 影响 ， 这 就 是 块 级 元 素 和 内 联 元 素 的 区 别 。 正 因为 有 
| 了 这 些 元 素 ， 才 使 网 页 变 得 丰富 多 彩 。 
如 果 没 有 CSS 的 作用 ， 块 级 元 素 会 以 每 次 换行 的 方式 一 直 往 下 排 ， 而 有 了 CSS 以 后 ， 
可 以 改变 这 种 HTML 的 默认 布局 模式 ， 把 块 级 元 素 摆 放 到 想 要 的 位 置 上 ， 而 不 是 每 次 都 另 起 
一 行 。 也 就 是 说 ， 可 以 用 CSS 的 display:inline 属性 将 块 级 元 素 改变 为 内 联 元 素 ， 也 可 以 用 
display:block 属性 将 内 联 元 素 改变 为 块 级 元 素 。 
代码 修改 如 下 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS 1ist-style-type 属性 示例 </title> 

<style type="text/css" media="all"> 

ul{list-style-type: disc;} 

img{width:100px; height:70px;} 

</style> 

</head> 

<body> 

<p> 标 签 同 一 行 : </p> 

<div style="display:inline"><imgsrc="flower.jpg" /></div> 
isplay:inline"><imgsrc="flower.jpg" /></div> 
<div style="display:inline"><imgsrc="flower.jpg" /></div> 
<p> 标 签 不 同行 : </p> 

<span style="display:block"><imgsrc="flower.jpg" /></span> 
<span style="display:block"><imgsrc="flower.jpg" /></span> 
<span style="display:block"><imgsrc="flower.jpg" /></span> 
</body> 

</html> 


由 此 可 以 看 出 ，display 属性 改变 了 块 级 元 素 与 内 联 元 素 默认 的 排列 方式 。 另 外 ， 如 果 
display 属性 值 为 none 的 话 ， 那 么 可 以 使 该 元 素 隐藏 ， 并 且 不 会 占据 空间 。 代 码 如 下 。 


<html> 

<head> 

<title>display 属性 示例 </title> 

<style type=" text/ css"> 

div{width:100px; height:50px; border:lpx solid red} 
</style> 

</head> 


<body> 

<div> 第 一 个 块 元 素 </div> 

<div style="display:none"> 第 二 个 块 元 素 </div> 
<div> 第 三 个 块 元 素 </div> 

</body> 

</html> 


13.2.7 案例 7 一 一 使 用 宽 高 样式 设 定 宽 高 


13.2.6 节 介绍 了 块 级 元 素 与 内 联 元 素 的 区 别 ， 本 节 介 绍 两 者 宽 高 属性 的 区 别 。 块 级 元 素 可 


以 设置 宽度 与 高 度 ， 但 内 联 元 素 是 不 能 设置 的 。 例 如 ，span 元 素 是 内 联 元 素 ， 给 span 设置 宽 
高 属性 的 代码 如 下 。 


<html> 

<head> 

<title> 宽 高 属性 示例 </title> 

<style type=" text/ css"> 

span{ background:#CCC } 

.special{ width:100px; height:50px; background:#cCcC} 
</style> 

</head> 

<body> 

<span class="special"> 这 是 span 元 素 1</span> 
<span> 这 是 span 元 素 2</span> 

</body> 

</html> 


在 这 个 示例 中 ， 显 示 的 结果 是 设置 了 宽 高 属性 的 span 元 素 1 与 没有 设置 宽 高 属性 的 span 


元 素 2 的 显示 效果 是 一 样 的 。 因 此 ， 内 联 元 素 不 能 设置 宽 高 属性 。 如 果 把 span 元 素 改 为 块 级 
元 素 ， 效 果 会 如 何 呢 ? 


素 


根据 13.2.6 节 所 学 内 容 ， 可 以 通过 设置 display 属性 值 为 block 来 使 内 联 元 素 变 为 块 级 元 
代码 如 下 。 


<html> 

<head> 

<title> 宽 高 属性 示例 </title> 

<style type=" text/ css"> 
span{background:#CCC;display:block ;border:lpx solid #036} 
.special{width:200px; height:50px; background:#CCC} 
</style> 

</head> 

<body> 

<span class="special"> 这 是 span 元 素 1</span> 
<span> 这 是 span 元 素 2</span> 

</body> 

</html> 


在 浏览 器 的 输出 中 可 以 看 出 ， 当 把 span 元 素 变 为 块 级 元 素 后 ， 类 为 special 的 span 元 素 


1 按照 所 设置 的 宽 高 属性 显示 ， 而 span 元 素 2 则 按 默认 状态 占据 一 行 显示 。 
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13.2.8 ”案例 8 一 一 使 用 边框 样式 美化 边框 


border 一 般 用 于 分 隔 不 同 的 元 素 。border 的 属性 主要 有 3 个 ， 即 color( 颜 色 )、width( 粗 
细 )、style( 样 式 )。 在 使 用 CSS 设置 边框 时 ， 可 以 分 别 使 用 border-color、border-width 和 
border-style 属性 设置 它们 。 

口 “border-color: 设 定 border 的 颜色 。 在 通常 情况 下 ， 颜 色 值 为 十 六 进 制 数 ， 如 红色 为 

#ff0000， 当 然 也 可 以 是 颜色 的 英语 单词 ， 如 red、yellow 等 。 

口 ”border-width: 设 定 border 的 粗细 程度 ， 可 以 设 为 thin、medium、thick 或 者 具体 的 
数值 ， 单 位 为 bx， 如 5px 等 。border 默认 的 宽度 值 为 medium， 一 般 浏 览 器 将 其 解 
析 为 2px。 

口 border-style: 设 定 border 的 样式 ， 可 以 设 为 none( 无 边框 线 )、dotted( 由 点 组 成 的 虚 
线 )、dashed( 由 短线 组 成 的 虚线 )、solid( 实 线 )、double( 双 线 ， 双 线 宽度 加 上 它们 之 间 
的 空白 部 分 的 宽度 就 等 于 border-width 定义 的 宽度 )、groove( 根 据 颜色 画 出 3D 沟 槽 
状 的 边框 )、ridge( 根 据 颜色 画 出 3D 将 状 的 边框 )、inset( 根 据 颜 色 画 出 3D 内 嵌 边 
框 ， 颜 色 较 深 )、outset( 根 据 颜色 画 出 3D 外 嵌 边 框 ， 颜 色 较 浅 )。 注 意 : border-style 
属性 的 默认 值 为 none， 因 此 边框 要 想 显 示 出 来 必须 设置 border-style 值 。 

为 了 更 清楚 地 看 到 这 些 样式 的 效果 ， 通 过 一 个 示例 来 展示 ， 其 代码 如 下 。 

<html> 

<head> 

<title>border 样式 示例 </title> 

<style type=" text/ css"> 

div{ width:300px; height:30px; margin-top:10px; 

border-width:S5px;border-color:green } 

</style> 

</head> 

<body> 

<div style="border-style:dashed"> 边 框 为 虚线 </div> 

<div style="border-style:dotted"> 边 框 为 点 线 </div> 

<div style="border-style:double"> 边 框 为 双 线 </div> 

<div style="border-style:groove"> 边 框 为 3D 沟 槽 状 线 </div> 

<div style="border-style:inset"> 边 框 为 3D 内 媒 边 框 线 </div> 

<div style="border-style:outset"> 边 框 为 3D 外 冉 边框 线 </div> 
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<div style="border-style:ridge"> 边 框 为 3D 兰 状 线 </div> 

<div style="border-style:solid"> 边 框 为 实 线 </div> 

</body> 

</html> 

在 上 面 的 示例 中 ， 分 别 设置 了 border-color、border-width 和 border-style 属性 ， 其 效果 是 
对 上 下 左右 4 条 边 同 时 产生 作用 。 在 实际 应 用 中 ， 除 了 采用 这 种 方式 外 ， 还 可 以 分 别 对 4 条 
边框 设置 不 同 的 属性 值 ， 方 法 是 按照 规定 的 顺序 ， 给 出 2 个 、3 个 、4 个 属性 值 ， 分 别 代表 
不 同 的 含义 。 给 出 2 个 属性 值 ， 第 一 个 数值 表示 上 下 边框 的 属性 ， 第 二 个 数值 表示 左右 边框 
的 属性 。 给 出 3 个 属性 值 : 第 一 个 数值 表示 上 边框 的 属性 ， 第 二 个 数值 表示 左右 边框 的 属 


性 ， 第 三 个 数值 表示 下 边框 的 属性 。 给 出 4 个 属性 值 : 依次 表示 上 、 右 、 下 、 左 边框 的 属 
性 ， 即 顺 时 针 排 序 。 
代码 如 下 。 


<html> 

<head> 

<title>border 样式 示例 </title> 

<style type=" text/ css"> 

div{border-width:5px 8px;border-color:green yellow red; border-style:dotted 

dashed solid double} 

</style> 

</head> 

<body> 

<qdiv> 设 置 边框 </div> 

</body> 

</html> 

给 div 设置 的 样式 为 上 下 边框 宽度 为 5px， 左 右边 框 宽度 为 8px; 上 边框 的 颜色 为 绿色 ， 
左右 边框 的 颜色 为 黄色 ， 下 边框 的 颜色 为 红色 ; 从 上 边框 开始 ， 按 照 顺 时 针 方 向 ，4 条 边框 的 
样式 分 别 为 点 线 、 虚 线 、 实 线 和 双 线 。 

如 果 某 元 素 的 4 条 边框 的 设置 都 一 样 ， 还 可 以 简写 为 : 


border:5px solid red; 


如 果 想 对 某 一 条 边框 单独 设置 ， 例 如 : 

border-left::5px solid red; 

这 样 就 可 以 只 设置 左边 框 为 红色 、 实 线 、 宽 为 Spx。 其 他 3 条 边 设置 类 似 ，3 个 属性 分 
别 为 border-right、border-top、border-bottom， 以 此 就 可 以 分 别 设置 右边 框 、 上 边框 、 下 边框 


的 样式 。 
如 果 只 想 设置 某 一 条 边框 的 某 一 个 属性 ， 例 如 : 


border-=left=color:: red? 


这 样 就 可 以 设置 左边 框 的 颜色 为 红色 。 其 他 属性 设置 类 似 ， 在 此 不 再 一 一 举例 。 


13.3 使 用 CSS 滤 镜 美化 网 页 


CSS 滤 镜 是 正 浏览 器 厂商 为 了 增加 浏览 器 功能 和 竞争 力 而 推出 的 一 种 网 页 特效 工具 。 从 
Internet Explorer 4.0 开始 ， 浏 览 器 便 开始 支持 多 媒体 滤 镜 特效 ， 人 允许 使 用 简单 的 代码 对 文 
本 和 图 片 进行 处 理 ， 例 如 模糊 、 彩 色 投 影 、 火 焰 效 果 、 图 片 倒 置 、 色 彩 渐变 、 风 吹 效 果 、 
光 坚 效果 等 。 当 把 滤 镜 和 渐变 结合 运用 到 网 页 脚本 语言 中 ， 就 可 以 建立 一 个 动态 交互 的 
网 页 。 

CSS 滤 镜 属性 的 标识 符 是 filter， 语 法 格式 如 下 。 


filter:filtername (parameters) 


其 中 ，filtemame 是 滤 镜 名 称 ， 如 Alpha、Blur、Chroma、DropShadow 等 ; parameters 指 


沼 到 让 羔 洒 卡 状 SSO 于 让 一半 遇 省 关 菲 卫 玉山 8&1 小 


D4 
25@ 


网 页 设计 与 网 站 建设 
案例 课堂 ~ 
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数 ， 通 过 这 些 参数 才能 够 决定 滤 镜 显示 的 效果 。 表 13-2 列 出 了 常用 滤 镜 名 称 。 


表 13-2 CSS 滤 镜 


滤 镜 名 称 效果 
Alpha 设置 透明 度 
BlendTrans 实现 图 像 之 间 的 淡 入 和 淡出 的 效果 
Blur 建立 模糊 效果 
Chroma 设置 对 象 中 指定 的 颜色 为 透明 色 
DropShadow 建立 阴影 效果 
FlipH 将 元 素 水 平 翻转 
FlipV 将 元 素 垂直 翻转 
Glow, 建立 外 发 光 效果 
Gray 灰 度 显示 图 像 ， 即 显示 为 黑白 图 像 
Invert 图 像 反 相 ， 包 括 色彩 、 饱 和 度 和 亮度 值 ， 类 似 底片 效果 
Light 设置 光源 效果 
Mask 建立 透明 遮 单 
RevealTrans 建立 切换 效果 
Shadow 建立 另 一 种 阴影 效果 
Wave 波纹 效果 
Xray 显现 图 片 的 轮廓 ， 类 似 于 XX 光 片 效果 


滤 镜 可 以 分 为 基本 滤 镜 和 高 级 滤 镜 ， 基 本 滤 镜 是 指 直接 作用 于 HTML 对 象 上 便 能 立即 生 
效 的 滤 镜 。 高 级 滤 镜 是 指 需要 配合 JavaScript 脚本 语言 ， 能 产生 变换 效果 的 滤 镜 ， 包 含 


BlendTrans、RevealTrans、Light 等 。 
13.3.1 案例 9 一 一 Alpha 滤 镜 


Alpha( 通 道 ) 滤 镜 能 实现 针对 图 片 文字 元 素 的 透明 效果 ， 这 种 透明 效果 是 通过 “把 一 个 目 
标 元 素 和 背景 混合 ”来 实现 的 ， 混 合 程度 可 以 由 用 户 指定 的 数值 来 控制 。 通 过 指定 坐标 ， 可 
以 指定 点 、 线 和 面 的 透明 度 。 如 果 将 Alpha 滤 镜 与 网 页 脚本 语言 结合 ， 并 适当 地 设置 其 参 
数 ， 就 能 使 图 像 显示 淡 入 淡出 的 效果 。 

Alpha 滤 镜 的 语法 格式 如 下 。 

{filter : Alpha ( enabled=bEnabled, style=iStyle, opacity=iOpacity, 


finishOopacity=iFinishOpacity, startx=iPercent, starty=iPercent, finishx=iPerce 
nt, finishy=iPercent )} 


各 参数 如 表 13-3 所 示 。 


全 2 


表 13-3 ”Alpha 滤 镜 参数 


参 数 说 明 
enabled 设置 滤 镜 是 否 激活 
i 设置 透明 渐变 的 样式 ， 也 就 是 渐变 显示 的 形状 ， 取 值 为 0 一 3。0 表示 无 渐变 ，1 表示 
此 全 线形 渐变 ，2 表示 圆 形 渐变 ，3 表示 矩形 渐变 
opacity 设置 透明 度 ， 值 范围 是 0 一 100。0 表示 完全 透明 ，100 表示 完全 不 透明 
finishOpacity 设置 结束 时 的 透明 度 ， 值 范围 也 是 0 一 100 
startx 设置 透明 渐变 开始 点 的 水 平 坐标 ( 即 x 坐标 ) 
starty 设置 透明 渐变 开始 点 的 垂直 坐标 ( 即 y 坐标 ) 
finishx 设置 透明 渐变 结束 点 的 水 平 坐标 
finishy 设置 透明 渐变 结束 点 的 垂直 坐标 
【 例 13.1】 为 图 像 添加 Alpha 滤 镜 (实例 文件 : ch13\13.1.html)。 
<html> 
<head> 
<title>Alpha 滤 镜 </title> 
</head> 
<body> 


作用 


原始 图 <img src="baimd.jpg" style="width:200px;height:120px;"> 
style=0<img src="baimd.jpg" style="width:200px;height:120px;filter : 
Alpha (opacity=60 ， style=0)" > 
style=2<img src="baimd.jpg" style="width:200px;height:120px;filter : 
Alpha (opacity=60 ， style=2)" > 
style=3 <img src="baimd.jpg" style="width:200px;height:120px;filter : 
Alpha (opacity=60 ， style=3)" > 
</body> 
</html> 


在 正中 浏览 效果 如 图 13-1 所 示 ， 可 以 看 到 显示 了 4 张 图 片 ， 其 透明 度 依次 减弱 。 

在 使 用 Alpha 滤 镜 时 要 注意 以 下 两 点 。 

(1) 由 于 Alpha 滤 镜 使 当前 元 素 部 分 透明 ， 该 元 素 下 层 的 内 容 的 颜色 对 整个 效果 起 着 重要 
， 因 此 颜色 的 合理 搭配 相当 重要 。 

(2) 透明 度 的 大 小 要 根据 具体 情况 仔细 调整 ， 取 一 个 最 佳 值 。 

【 例 13.2】 Alpha 滤 镜 应 用 于 文字 (实例 文件 : ch13\13.2.html)。 


<html> 
<head> 
<title>Alpha 滤 镜 </title> 
<style type="text/css"> 
1 
Pi 
color:yellow; 
font-weight:bolder; 
font=size:25pt7 
width:100% 
} 
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</style> 
</head> 
<body style="background-color:Black"> 
<div > 
<p>Alpha 滤 镜 </p> 
<p style="filter:alpha (opacity=60 ，style=1)"> 透 明 效果 </p> 
<p style="filter:alpha (opacity=60 ，style=2) "> 透明 效果 </p> 
<p style="filter:alpha(opacity=60 ，style=3) "> 透明 效果 </p> 


</div> 
</body> 
</html> 
在 正中 浏览 效果 如 图 13-2 所 示 ， 可 以 看 到 显示 出 4 个 段落 ， 其 透明 度 依次 减弱 。 


吾 二 画 


或 100% ~ 


13-1 Alpha 小 镜 应 用 于 图 片 图 13-2 Alpha 小 镜 应 用 于 文字 
13.3.2 ”案例 10 一 一 Blur 滤 镜 


Blur( 模 糊 ) 滤 镜 可 实现 页 面 模糊 效果 ， 即 在 一 个 方向 上 的 运动 模糊 。 如 果 应 用 得 当 ， 就 可 
以 产生 高 速 移动 的 动感 效果 。 
Blur 滤 镜 的 语法 格式 如 下 。 
{filter : Blur ( enabled=bgEnabled , add=iadd ，direction=iairection ， 
strength=fstrength )} 
各 参数 如 表 13-4 所 示 。 
表 13-4 Blur 小 镜 参数 


参 数 说 明 
enabled 设置 滤 镜 是 否 激活 
指定 图 片 是 否 改变 成 模糊 效果 。 这 是 个 布尔 参数 ， 有 效 值 为 True 或 False。True 是 默认 
值 ， 表 示 应 用 模糊 效果 ; False 则 表示 不 应 用 
设 定 模糊 方向 。 模 糊 效果 是 按 顺 时 针 方 向 起 作用 的 ， 取 值 范围 为 0 一 360 度 ，45 度 为 一 
direction 个 间隔 。 有 8 个 方向 值 : 0 表示 零度 ， 代 表 向 上 方向 ，45 表示 右上 ; 90 表示 向 右 ; 135 
表示 右 下 ; 180 表示 向 下 ; 225 表示 左下 ; 270 表示 向 左 ，315 表示 左上 
指定 模糊 半径 大 小 ， 单 位 是 像素 ， 默 认 值 为 5， 取 值 范 围 为 自然 数 ， 该 取 值 决定 了 模糊 
效果 的 延伸 范围 


add 


strength 
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【 例 13.3】 为 图 片 与 文字 应 用 Blur 滤 镜 (实例 文件 : ch13\13.3.html)。 


<htm1> 
<head> 
<title> 模 糊 Blur</title> 
<style> 
img{ 
height:180px; 


div.div2 { width:400px;filter:blurl(add=true,direction=90,strength=50) } 
</style> 


</head> 
<body> 
原始 图 <img src="baihua.jpg"> 
add=true<img src="baihua.jpg" 
style="filter:Blur(add=true,direction=225, strength=20)"> 
add=false<img src="baihua.jpg" 
style="filter:Blur (add=false,direction=225, strength=20)"> 
<div class="div2"> 
<p style="font-size: 30pt; font-weight: bold; color:DarkBlue"> 
Blur 滤 镜 </p> 
</div> 
</body> 
</html> 


在 正中 浏览 效果 如 图 13-3 所 示 ， 可 以 看 到 两 
张 模糊 图 片 均 在 一 定 方向 上 发 生 模 糊 。 下 方 的 文 。 | 时 
字 也 发 生 了 模糊 ， 具 有 文字 吹风 的 效果 。 


13.3.3 ”案例 11 一 一 Chroma 滤 镜 


Chroma( 透 明 色 ) 滤 镜 可 以 设置 HIML 对 象 中 
指定 的 颜色 为 透明 色 。 其 语法 格式 如 下 。 


昼 习 低音 订 引 琳 SSD 洒 记 一 并 遇 诈 弟 菲 硫 洗 由 8&1 省 


GZ 


{filter : Chroma (enabled=bEnabled ， 
color=sColor)} Blur 滤 镜 


其 中 ，color 参数 设置 要 变 为 透明 色 的 颜色 。 
【 例 13.4】 ”应 用 Chroma 滤 镜 (实例 文件 : 人 
ch13\13.4.html)。 


<html> 
<head> 
<title>Chroma 滤 镜 </title> 
<style> 
i 
div{position:absolute;top:70;letf:40; filter:Chroma (color=blue)} 
p{font-size:30pt; font-weight:bold; color:blue} 
E22 
</style> 
</head> 
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网 页 设计 与 网 站 建设 
案例 课堂 ~ 


<body> 
<p>Chroma 滤 镜 效果 </p> 
<div> 
<p>Chroma 滤 镜 效果 </p> 
</div> 
</body> 
</html> 


在 下 中 浏览 效果 如 图 13-4 所 示 ， 可 以 看 到 第 二 个 段落 中 某 些 笔画 丢失 。 拖 动 鼠标 选择 
过 滤 颜 色 后 的 文字 ， 便 可 以 查看 到 丢失 的 笔画 


a] 


KE EEC | 


所 1008 ~ 


13-4 ”Chroma 滤 镜 的 应 用 


Chroma 滤 镜 一 般 应 用 于 文字 特效 ， 而 且 对 于 有 些 格式 的 图 片 也 不 适用 。 例 如 ，JPEG 格 
式 的 图 片 是 一 种 已 经 减 色 和 压缩 处 理 的 图 片 ， 所 以 要 设置 其 中 某 种 颜色 透明 十 分 困难 。 


13.3.4 ”案例 12 一 一 DropShadow 滤 镜 


阴影 效果 在 实际 的 文字 和 图 片 中 非常 实用 ，DropShadow( 下 落 的 阴影 ) 滤 镜 用 于 建立 阴影 
效果 ， 使 元 素 内 容 在 页 面 上 产生 投影 ， 从 而 实现 立体 的 效果 。 其 工作 原理 就 是 创建 一 个 偏 移 
量 ， 并 定义 一 个 阴影 颜色 ， 使 之 产生 效果 。 

DropShadow 滤 镜 的 语法 格式 如 下 。 


{filter : DropShadow ( enabled=bEnabled , color=sColor , offx=iOffsetx, 
offy=iOffsety, positive=bPositive ) } 


各 参数 如 表 13-5 所 示 。 


表 13-5 DropShadow 滤 镜 参数 


参 数 说 明 
enabled 设置 滤 镜 是 否 激活 
colin | 指定 滤 镜 产生 的 阴影 颜色 
offx 指定 阴影 水 平方 向 偏 移 量 ， 默 认 值 为 Spx 


offy 指定 阴影 垂直 方向 偏 移 量 ， 默 认 值 为 5px 
指定 阴影 透明 程度 ， 为 布尔 值 。True(1) 表 示 为 任何 的 非 透明 像素 建立 可 见 的 阴影 ， 
False(0) 表 示 为 透明 的 像素 部 分 建立 透明 效果 


positive 


【 例 13.5】 应 用 DropShadow 滤 镜 (实例 文件 : ch13\13.5.html)。 


第 

<html> Dd 

<head> 章 

<title>DropShadow 滤 镜 </title> 读 

</head> 懂 

<body> 样 

<table width="90%" height="90%"> 式 

<tr> 表 

<td style="filter: DropShadow (color=gray,offx=10,offy=10,positive=1)"> 可 

<img src="9.jpg" > 
</td> | 

</tr> 使 

<Er> 及 

<td style="filter:DropShadow (color=gray, offx=5,offy=5.positive=1); (CD 

font-size:20pt; color:DarkBlue"> 样 

这 是 一 个 阴影 效果 式 

</td> 表 

</tr> 美 

</table> 化 

</body> 
</html> NN 


在 下 中 浏览 效果 如 图 13-5 所 示 ， 可 以 看 到 图 片 产生 了 阴影 ， 但 不 明显 ， 下 方 文字 产生 
的 阴影 效果 明显 。 
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图 13-5 “Dropshadow 滤 镜 的 应 用 
13.3.5 “案例 13 一 一 FlipH 滤 镜 和 FlipV 滤 镜 


在 CSS 中 ， 可 以 通过 Filp 滤 镜 实现 HTML 对 象 的 翻转 效果 。 其 中 FlipH 滤 镜 用 于 水 平 翻 
转 对 象 ， 即 将 元 素 对象 按 水 平方 向 进行 180 度 翻转 。FlipH 滤 镜 可 以 在 CSS 中 直接 使 用 ， 使 
用 格式 如 下 。 

{Fliter: FlipH (enabled=bEnabled)} 

该 滤 镜 中 只 有 一 个 enabled 参数 ， 表 示 是 否 激活 该 滤 镜 。 

【 例 13.6】 应 用 FlipH 滤 镜 (实例 文件 : ch13\13.6.html) 。 


<html > 


2a1®@ 


网 页 设计 与 网 站 建设 
案例 课堂 ~ 


<head> 
<title>FlipH 滤 镜 </title> 

<style> 

img{ 

height:120px; 

width:200px; 

</style> 

</head> 

<body> 
原 图 片 <img src="9.jpg"> 
图 片 水 平 翻 转 <img src="9.jpg" style="Filter:FlipH()"> 


</body> 
</html> 


在 正中 浏览 效果 如 图 13-6 所 示 ， 可 以 看 到 图 片 以 中 心 为 支点 ， 进 行 了 左右 方向 上 的 翻转 。 
FlipV 滤 镜 用 来 实现 对 象 的 垂直 翻转 ， 包 括 文字 和 图 像 。 其 语法 格式 如 下 。 


{Fliter: FlipV (enabled=bEnabled)} 


其 中 ，enabled 参数 表示 是 否 激活 滤 镜 。 
【 例 13.7】 应 用 FlipV 滤 镜 (实例 文件 : ch13\13.7.html) 。 


<html> 
<head> 
<title>FlipV 滤 镜 </title> 
</head> 
<body> 
<img src="9.jpg"> 原 图 片 
<img src="9.jpg"” style="Filter:FlipV() "> 图片 垂直 翻转 
</body> 
</html> 


在 正中 浏览 效果 如 图 13-7 所 示 ， 可 以 看 到 图 片 发 生 了 上 下 翻转 。 
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图 13-6 FlipH 滤 镜 的 应 用 13-7 ”FlipV 滤 镜 的 应 用 
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13.3.6 ”案例 14 一 一 Glow 滤 镜 


文字 或 物体 发 光 的 特性 往往 能 吸引 浏览 者 注意 ，Glow( 光 晕 ) 滤 镜 可 以 使 对 象 的 边缘 产生 
一 种 柔和 的 边框 或 光 晕 ， 并 可 产生 如 火焰 一 样 的 效果 。 
其 语法 格式 如 下 。 


{filter : Glow ( enabled=bEnabled , color=sColor ， strength=iDistance ) } 


其 中 ，color 用 于 设置 边缘 光 晕 颜色 strength 用 于 设置 晕 圈 范围 ， 值 范围 是 1 一 255， 值 
越 大 效果 越 强 。 
【 例 13.8】〗】 应 用 Glow 滤 镜 (实例 文件 : ch13\13.8.html)。 


<html> 
<head> 
<title>filter glow</title> 
这 段 文字 不 带 有 光学 
<style> 
二 
-Wenyi{ 
width:100%; 
filter:Glow (color=#9966CC, strength=10)} 


一 -> 

</style> 
</head> 
<body> 

<div class="weny"> 

<p style="font-family: 1 幼 圆 ; font-size: 40pt; font-weight: bolder; 
color: #003366"> 
这 段 文字 带 有 光学 

</div> 
</body> 
</html> 


在 正 中 浏览 效果 如 图 13-8 所 示 ， 可 以 看 到 文字 fe 


带 有 光学 出 现 ， 非 常 漂亮 。 当 Glow 滤 镜 作用 于 文字 |=*% wes sav ses% 3 


时 ， 每 个 文字 边缘 都 会 出 现 光 晕 ， 效 果 非 常 强烈 。 而 
对 于 图 片 ，Glow 滤 镜 只 在 其 边缘 加 上 光量。 


13.3.7 “案例 15 一 一 Gray 滤 镜 


黑白 色 是 一 种 经 典 颜色 ， 使 用 Gray( 灰 色 ) 滤 镜 能 
够 轻松 地 将 彩色 图 片 变 为 黑白 图 片 。 
其 语法 格式 如 下 。 


{filter:Gray (enabled=bEnabled)} 


其 中 ，enabled 表示 是 否 激活 滤 镜 ， 可 以 在 页 面 代码 中 直接 使 用 。 
【 例 13.9】 应 用 Gray 滤 镜 (实例 文件 :ch13\13.9.html)。 


<htm]l> 


13-8 ”Glow 滤 镜 的 应 用 


a 


沼 避 记 关 洒 卡 蒂 SSO 洒 户 一 一 训 遇 计 此 状 硫 一 册 8} 小 全 
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网 页 设计 与 网 站 建设 
案例 课堂 ~ 


<head> 


<title>Gray 滤 镜 </title> 
</head> 
<body> 
<img src="9.jpg" style="width: 50%;height:50%" /> 原 图 
<img src="9.jpg" style="width: 50%;height:50%; filter: Gray()" 
/> 灰 度 图 
</body> 
</html> 
sl a = 
在 下 中 浏览 效果 如 图 13-9 所 示 ， 可 以 看 到 下 [oomernap-cxleom "i 
面 一 张 图 片 以 黑白 色 显 示 。 ET SEEEOEETEE ED 


13.3.8 ”案例 16 一 一 Invert 滤 镜 


Invert( 反 色 ) 滤 镜 可 以 把 对 象 的 可 视 化 属性 全 部 
翻转 ， 包 括 色 彩 、 饱 和 度 和 亮度 值 ， 使 图 片 产生 一 
种 底片 或 负片 的 效果 。 | 

其 语法 格式 如 下 。 Cr 


{filter:Invert (enabled=bEnabled)} 图 13-9 Gray 滤 镜 的 应 用 


其 中 ，enabled 参数 用 来 设置 是 否 激活 滤 镜 。 
【 例 13.10】 ”应 用 Invert 滤 镜 (实例 文件 : ch13\13.10.html)。 


<html> 

<head> 

<title>Invert 滤 镜 </title> 

</head> 

<body> 

<img src="9.jpg" /> 原 图 

<img src="9.jpg" style="width:30%; filter: Invert()" /> 反 相 图 
</body> 

</html> 


在 下 中 浏览 效果 如 图 13-10 所 示 ， 可 以 看 到 下 面 
张 图片 以 相片 底片 的 颜色 出 现 。 


13.3.9 案例 17 一 一 Mask 滤 镜 


通过 Mask( 遮 单 ) 滤 镜 ， 可 以 为 网 页 中 的 元 素 对 象 制 
作出 一 个 矩形 遮 罩 。 呀 单 ， 就 是 指使 用 一 个 颜色 图 层 将 
包含 有 文字 或 图 像 等 对 象 的 区 域 遮 盖 ， 但 是 文字 或 图 像 
部 分 却 以 背景 色 显 示 出 来 。 

Mask 滤 镜 的 语法 格式 如 下 。 图 13-10 ”Invert 滤 镜 的 应 用 


{filter:Mask (enabled=bEnabled , color=sColor)} 


其 中 ， 参 数 color 用 来 设置 Mask 滤 镜 作用 的 颜色 。 


使 244 
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【 例 13.11】 应 用 Mask 滤 镜 (实例 文件 : ch13\13.11.html)。 


<html> 

<head> 

<title>Mask 遮 单 滤 镜 </title> 

<style> 

pt 
width:400; 

filter:mask(color:#FF9900); 
font-size:40pt; 
font-weight:bold; 
color:#00CC99; 


3 

</style> 

</head> 

<body> 

<p> 这 里 有 个 遮 单 </p> 

</body> 

</html> 

在 正 中 浏览 效果 如 图 13-11 所 示 ， 可 以 看 到 文字 上 面 有 
一 个 遮 罩 ， 文 字 颜 色 是 背景 颜色 。 


13.3.10 ”案例 18 一 一 Shadow 滤 镜 


可 以 通过 Shadow( 阴 影 ) 滤 镜 来 给 对 象 添加 阴影 效果 ， 
其 实际 效果 看 起 来 好 像 是 对 象 离开 了 页 面 ， 并 在 页 面 上 显 
示 出 该 对 象 的 阴影 。 阴 影 部 分 的 工作 原理 是 建立 一 个 偏 移 图 13-11 Mask 滤 镜 的 应 用 
量 ， 并 为 其 加 上 颜色 。 

其 语法 格式 如 下 。 

{filter:Shadow (enabled=bgEnabled, color=sColor, direction=iOffset, strength= 

iDistance)} 


各 参数 如 表 13-6 所 示 。 


昼 习 从 亲 洒 央 天 SSO 性 集 一 一 前 时 订 此 六 陷 注 由 81 小 


GG 


表 13-6 ”Shadow 滤 镜 参数 


参 数 说 明 
enabled 设置 滤 镜 是 否 激活 
ea | 设置 投影 的 颜色 


设置 投影 的 方向 ， 分 别 有 8 种 取 值 ， 代 表 8 种 方向 : 取 值 为 0 表示 向 上 ，45 为 右上 ，90 


direction | 


为 右 ，135 为 右 下 ，180 为 下 ，225 为 左下 ，270 为 左 ，315 为 左上 
strength 设置 投影 向 外 扩散 的 距离 
【 例 13.12】 应 用 Shadow 滤 镜 (实例 文件 : ch13\13.12.htmD。 
<html> 
<head> 


<title> 阴 影 效 果 </title> 
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13.3.11 ”案例 19 一 一 Wave 滤 镜 


案例 课堂 >… 


<style> 

hl { 
Color:#FF6600; 
width:400; 
filter:shadow (color=blue, offx=15, offy=22, positive=flase); 

</style> 

</head> 

<body> 

<h1> 我 好 看 么 </h1> 

</body> 

</html> 


在 下 中 浏览 效果 如 图 13-12 所 示 ， 可 以 看 到 文字 带 有 阴 


果 。 


Wave( 波 浪 ) 滤 镜 可 以 为 对 象 添加 竖 直方 向 上 的 波浪 效 


果 ， 也 可 以 用 来 把 对 象 按照 竖 直 的 波纹 样式 打 乱 。 1 

其 语法 格式 如 下 。 

{filter:Wave (enabled=bEnabled, add=bAddImage, freq=iWaveCount, 

lightstrength=iPercentage, phase=iPercentage, strength=iDistance)} 

各 参数 如 表 13-7 所 示 。 

表 13-7 Wave 小 镜 参数 
参 数 说 了 明 
enabled 设置 滤 镜 是 否 激活 
add 布尔 值 ， 表 示 是 否 在 原始 对 象 上 显示 效果 。True 表示 显示 ，False 表示 不 显示 
freq 设置 生成 波纹 的 频率 ， 也 就 是 设 定 在 对 象 上 产生 的 完整 的 波纹 的 条 数 
lightStrength 设置 波纹 效果 的 光照 强度 ， 取 值 为 0 一 100 
设置 正弦 波 开始 的 偏 移 量 ， 取 百分比 值 0 一 100， 默 认 值 为 0。25 就 是 360 度 x25% 为 
phase 
90 度 ，50 则 为 180 度 

strength 设置 波纹 的 曲折 的 强度 

【 例 13.13】 应 用 Wave 滤 镜 (实例 文件 : ch13\13.13.html)。 

<html> 

<head> 

<title> 波 浪 效 果 </title> 

<style> 

hl { 


color:violet; 

text = aliqns Tet 

width:400; 

filter:wave (add=true, freq=5, lightSstrength=45, phase=20, strength=3); 
</style> 


</head> 
<body> 


<h1> 一 起 去 看 大 海 </h1> 

</body> 

</html> 

在 下 中 浏览 效果 如 图 13-13 所 示 ， 可 以 看 到 文字 带 0 
有 波浪 效果 。 ET ET 


13.3.12 ”案例 20 一 一 X-ray 滤 镜 


X-ray 的 中 文 含义 为 X 射线 。X-ray 滤 镜 可 以 使 对 象 
反映 出 它 的 轮廓 ， 并 把 这 些 轮廓 的 颜色 加 亮 ， 使 整体 看 起 
来 会 有 一 种 义 光 片 的 效果 。 

其 语法 格式 如 下 。 


{filter:Xray (enabled=bEnabled)} 


其 中 ，enabled 参数 用 于 确定 是 否 激活 该 滤 镜 。 
【 例 13.14】 应 用 X-ray 滤 镜 (实例 文件 : ch13\13.14.htmD)。 


<html> 

<head> 

<title>x 射线 </title> 
<style> 

.noe { 

filter:xray; 
</style> 

</head> 

<body> 

<img src="9.jpg" class="noe" /> 
<img src="9.jpg" /> 
</body> 

</html> 


在 正中 浏览 效果 如 图 13-14 所 示 ， 可 以 看 到 图 片 有 XX 光 效 果 。 


13-13 ”Ware 滤 镜 的 应 用 


13-14 X-ray 滤 镜 的 应 用 


2a®@ 


网 页 设计 与 网 站 建设 
案例 课堂 ~ 


13.4 ”实战 演练 一 一 设 定 网 页 中 的 链接 样式 


“ 搜 搜 ” 作 为 一 个 搜索 引擎 网 站 ， 知 名 度 越 来 越 高 。 打 开 其 首页 ， 可 以 看 到 存在 一 个 水 
平 导 航 菜单 ， 通 过 该 菜单 可 以 搜索 不 同类 别 的 内 容 。 本 实例 将 结合 本 章 学 习 的 知识 ， 轻 松 实 
现 搜 搜 导航 栏 ， 具 体操 作 步 又 如 下 。 
实现 该 实例 ， 需 要 包含 三 个 部 分 ， 第 一 部 分 是 搜 搜 图 标 ， 第 二 部 分 是 水 平 菜单 导航 栏 ， 
也 是 本 实例 的 重点 ; 第 三 部 分 是 表单 部 分 ， 包 含 一 个 文本 框 和 一 个 按钮 。 该 实例 实现 后 ， 其 
实际 效果 如 图 13-15 所 示 。 


13-15 ”预览 网 页 效果 


本 TY 创建 HTML 网 页 ， 实 现 基本 HTML 元 素 。 
对 于 本 实例 ， 需 要 利用 HTML 标签 实现 搜 搜 图 标 、 导 航 的 项 目 列表 、 下 方 的 搜索 文本 框 
和 按钮 等 。 其 代码 如 下 。 


<html> 

<head> 

<title> 搜 搜 </title> 

</head> 

<body> 

<center><br><img src="logo index.png"><br><br><br><br> 

<div> 

<ul> 

<1i id=h></1i> 

<1i><a href="#"> 网 页 </a></1i> 
<1i><a href="#"> 图 片 </a></1i> 
<1i><a href="#"> 视 频 </a></1i> 
<1i><a href="#"> 音 乐 </a></1i> 
<1i><a href="#"> 搜 吧 </a></1i> 
<1i><a href="#"> 问 问 </a></1i> 
<1i><a href="#"> 团 购 </a></1i> 
<1i><a href="#"> 新 闻 </a></1i> 
<1i><a href="#"> 地 图 </a></1i> 
<1i id="more"><a href="#"> 更 多 &gt;&gt;</a></1i> 

</ul> 

</div> 

<p style="height:44px;">&gnbsp;</p> 
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<div id=s> 

<form action="/q?" id="flpage" name="flpage"> 
<input type="text" value="" size=50px;/> 
<input type="submit"” value=" 搜 搜 "> 


</form> 
</div> 
</center> 
</body> 
</html> 码 
在 正 中 浏览 效果 如 图 13-16 所 示 ， 可 以 看 到 上 方 显示 了 一 个 图 片 ， 即 搜 搜 图 标 ， 中 间 显 
示 了 一 列 项 目 列表 ， 每 个 选项 都 是 超级 链接 ， 下 方 是 一 个 表单 ， 包 含 文本 框 和 按钮 。 辣 
EUB) 添加 CSS 代码 ， 修 饰 项 目 列表 。 2 
框架 出 来 之 后 ， 就 可 以 修改 项 目 列表 的 相关 样式 ， 使 列表 水 平 显示 ， 同 时 定义 整个 DIV 楼 
层 的 属性 ， 如 设置 背景 色 、 宽 度 、 底 部 边框 、 字 体 大 小 等 。 其 代码 如 下 。 雪 \ 
ER CT ocx 从 
IE 三 页 
SO50 搜 扫 
mm 


13-16 ”创建 基本 HTML 网 页 


p{margin:0px; padding:0px;} 

#div{ 
margin:0px auto; 
font-size:12px; 
padding:0px; 
border-bottom:lpx solid #00c; 
background:#eee; 
width:800px;height:18px; 


经 


div 1i{ 
float:left; 
list-style-type:none; 
margin:0px;padding:0px; 
width:40px; 


上 面 代码 中 ，float 属性 用 于 设置 菜单 栏 水 平 显 示 ，list-style-type 属性 用 于 设置 列表 不 显 
示 项 目 符号 。 在 正 中 浏览 效果 如 图 13-17 所 示 ， 可 以 看 到 页 面 整体 效果 和 搜 搜 首页 比较 相 
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似 ， 下 面 就 可 以 在 细节 上 进行 进一步 的 修改 了 。 
EGG 添加 CSS 代码 ， 修 饰 超级 链接 。 


div 11 a{ 
display:block; 
text-decoration:underline; 
padding:4px Opx Opx Opx; 
margin:0px; 

font-size:13px; 

时 

div 1i a:link, div li a:visited{ 
color:#004276; 


上 面 代码 设置 了 超级 链接 ， 即 菜单 导航 栏 中 选项 的 相关 属性 ， 如 超级 链接 以 块 显示 、 文 
本 带 有 下 划 线 ， 字 体 大 小 为 13 像素 ， 并 设 定 了 鼠标 访问 超级 链接 后 的 颜色 。 
在 下 中 浏览 效果 如 图 13-18 所 示 ， 可 以 看 到 字体 颜色 发 生 改变 。 


5O5O 搜 要 5O5O 提 近 


到 页 图 上 扫 全 省 条 搜 到 加 回国 因 更 各 
加 页 盟 上 规 坦 所 扫 开 同 同 轩 隐 于 必 芭 图 更 六 RS 秆 2 生生 
i] 


Fr 


图 13-17 ”修饰 项 目 列表 图 13-18 ”修饰 超级 链接 
添加 CSS 代码 ， 定 义 对 齐 方式 和 表单 样式 。 


div li#h{width:180px;height:18px;} 
div li#more{width:85px;height:18px;} 
#s{ 


background-color:#006EB8; 
width:430px; 
时 


上 述 代 码 中 ，h 定义 了 水 平 菜单 最 前 方 空间 的 大 小 ，more 定义 了 更 多 的 宽度 和 高 度 ，s 定 
义 了 表单 背景 色 和 宽度 。 在 正 中 浏览 效果 如 图 13-19 所 示 。 

ED 添加 CSS 代码， 修饰 访问 默认 样式 。 

<a href="#" style="text-decoration:none;color:#020202;font-size:14px;"> 网 页 

</a> 

此 代码 段 设置 了 被 访问 时 的 默认 样式 。 在 正 中 浏览 效果 如 图 13-20 所 示 ， 可 以 看 到 “网 
页 ”菜单 二 字 的 颜色 为 黑色 ， 且 不 带 有 下 划 线 。 
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加 页 图 上 要 晰 豆 和 执 吧 辐 辐 于 网 新 晕 地 加 更 六 六 


ET 


图 13-19 ”定义 对 齐 方式 和 表单 样式 图 13-20 ”网 页 最 终 效果 


13.5” 跟 我 练 练 手 
13.5.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
13.5.2 上 机 练习 


练习 1: 使 用 CSS 样式 表 美 化 网 页 。 
练习 2: 使 用 CSS 滤 镜 美化 网 页 。 
练习 3: 设 定 网 页 中 的 链接 样式 。 


昼 司 心间 订 此 蘑 SSO 于 请 一 一 并 


13.6 高 手 甜 点 


甜点 1: 滤 镜 效果 是 IE 浏览 器 特有 的 CSS 特效 ， 那 么 在 Firefox 中 能 否 实现 呢 


滤 镜 效果 虽然 是 正 浏览 器 的 特有 效果 ， 但 使 用 Firefox 浏览 器 的 一 些 属 性 也 可 以 实现 相 
同 的 效果 。 例 如 下 的 阴影 效果 ， 在 Firefox 网 页 设计 中 ， 可 以 先 在 文字 下 面 再 合 一 层 浅 色 的 
同样 的 字 ， 然 后 做 两 个 像素 的 错位 ， 制 造 阴影 的 假象 。 

甜点 2: 文字 和 图 片 导 航 哪个 速度 快 

文字 导航 不 仅 速度 快 ， 而 且 更 稳定 ， 因 为 有 些 用 户 上 网 时 会 关闭 图 片 。 在 处 理 文本 时 要 
注意 ， 除 非特 别 需要 ， 和 否则 不 要 为 普通 文本 添加 下 划 线 ， 令 用 户 误 认 为 其 能 够 点 击 。 
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14.4 全 于 模型 


将 网 页 上 的 每 个 HTML 元 素 都 认为 是 长 方形 的 盒子 ， 是 网 页 设计 上 的 一 大 创新 。 在 控制 
页 面 方面 ， 盒 子 模型 有 着 至 关 重要 的 作用 。 熟 练 掌握 盒子 模型 及 其 各 个 属性 ， 是 控制 页 面 中 
每 个 HTML 元 素 的 前 提 。 


14.1.1 盒子 模型 的 概念 


CSS 中 ， 所 有 的 页 面 元 素 都 包含 在 一 个 矩形 框 内 ， 称 为 盒子 。 盒 子 描述 了 元 素 在 页 面 
布局 中 所 占 的 空间 大 小 ， 因 此 盒子 可 以 影响 其 他 元 素 的 位 置 及 大 小 。 例 如 ， 页 面 中 第 一 个 
盒子 为 10px， 那 么 下 一 个 盒子 就 处 于 离 顶部 10px 距离 的 位 置 。 如 果 第 一 个 盒子 增加 为 
20px， 则 下 一 个 盒子 就 要 再 下 移 10px。 而 整个 页 面 就 是 由 这 些 个 大 大 小 小 但 不 会 重合 的 盒子 
形成 的 。 

盒子 模型 由 content( 内 容 )、padding( 空 白 )、border( 边 margin-top 
框 )、margin( 边 界 ) 几 个 属性 组 成 。 此 外 在 盒子 模型 中 ， 还 和 
具备 高 度 和 宽度 两 个 辅助 属性 。 盒 子 模型 如 图 14-1 所 示 。 

从 图 中 可 以 看 出 ， 盒 子 模型 包含 如 下 4 个 部 分 。 ee 

(1) content( 内 容 ): 内 容 是 盒子 模型 中 必需 的 一 部 分 ， 
内 容 可 以 是 文字 、 图 片 等 元 素 。 

(2) padding( 填 充 ): 也 称 内 边 距 或 补 白 ， 用 来 设置 内 容 
和 边框 之 间 的 距离 。 Ne 

(3) border( 边 框 ): 可 以 设置 内 容 边 框 线 的 粗细 、 颜 图 14-1 盒子 模型 
色 、 样 式 等 ， 前 面 已 经 介绍 过 。 

(4) margin( 边 界 ): 外 边 距 ， 用 来 设置 内 容 与 内 容 之 间 的 距离 。 

对 于 这 些 属 性 可 以 把 它 转 移 到 日 常生 活 中 的 盒子 (箱子 ) 上 来 理解 ， 日 常生 活 中 所 见 的 盒子 
也 就 是 能 装 东西 的 一 种 箱子 ， 也 具有 这 些 属 性 。 内 容 (contenb) 就 是 盒子 里 装 的 东西 ;而 填充 
(padding) 就 是 怕 盒 子 里 装 的 东西 (贵重 的 ) 损 坏 而 添加 的 泡沫 或 者 其 他 抗震 的 辅料 ， 边 框 (borderD) 
就 是 盒子 本 身 了 ; 至 于 边界 (nargin) 则 说 明 盒子 摆 放 的 时 候 不 能 全 部 堆 在 一 起 ， 要 留 一 定 空隙 
保持 通风 ， 同 时 也 为 了 方便 取出 。 


在 网 页 设计 上 ， 内 容 常 指 文字 、 图 片 等 元 素 ， 但 是 也 可 以 是 小 盒子 (DIV 谈 套 )。 
CSS 盒子 与 现实 生活 中 的 盒子 不 同 的 是 ， 现 实生 活 中 的 东西 一 般 不 能 大 于 盒子 ， 否 则 
盒子 会 被 撑 坏 ; 而 CSS 售 子 具有 弹性 ， 里 面 的 东西 大 过 盒子 本 身 最 多 把 它 撑 大 ， 但 
它 不 会 损坏 。 

一 个 盒子 的 实际 高 度 (宽度 ) 是 由 contenttpadding+bordertmargin 组 成 的 。 在 CSS 中 ， 可 以 
通过 设 定 width 和 height 来 控制 content 的 大 小 ， 并 且 对 于 任何 一 个 盒子 ， 都 可 以 分 别 设 定 4 
条 边 的 border、padding 和 margin。 


padding-bottom 
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14.1.2 ”案例 1 一 一 网 页 border 区 域 定义 


border 边框 是 内 边 距 和 外 边 距 的 分 界线 ， 可 以 分 离 不 同 的 HTML 元 素 ，border 的 外 围 是 
元 素 的 最 外 围 。 在 网 页 设计 中 ， 如 果 计 算 元 素 的 宽 和 高 ， 需 要 把 border 计算 在 内 。 

border 有 3 个 属性 ， 分 别 是 边框 样式 (style)、 颜 色 (coloD 和 宽度 (width)。 

【 例 14.1】 定义 网 页 border 区 域 (实例 文件 : ch14\14.1.html)。 


<html> 
<head> 
<title>border 边框 </title> 
<style type="text/css"> 
=adivi{ 
Border-width:10px; 
border-color:#ddccee; 
border-style:solid; 
width:410px; 
} 
-div21{ 
border-width:1lpx; 
border-color:#adccdd; 
border-style:dotted; 
width:410px; 
} 
.div3{ 
border-width:1px; 
border-color:#457873; 
border-style:dashed; 
width:410px; 
} 
</style> 
</head> 
<body> 
<div class="div1l"> 
这 是 一 个 宽度 为 10px 的 实 线 边框 。 
</div> 
<br /><br /> 
<div class="div2"> 
这 是 一 个 宽度 为 1px 的 虚线 边框 。 
</div> 
<br /><br /> 
<div class="div3"> 
这 是 一 个 宽度 为 1px 的 点 状 边框 。 
</div> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 14-2 所 示 ， 可 以 看 到 显示 了 三 个 不 同 风格 的 盒子 ， 第 一 个 盒子 
的 边框 线 宽度 10 像素 ， 边 框 样式 为 实 线 边框 ， 颜 色 为 紫色 ;第 二 个 盒子 的 边框 线 宽度 为 1 像 
素 ， 边 框 样式 为 虚线 边框 ， 颜 色 为 浅 绿色 ; 第 三 个 盒子 的 边框 线 宽度 为 1 像素 ， 边 框 样式 为 
点 状 边 框 ， 颜 色 为 绿色 。 
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这 证 一个 寅 度 为 15z 捕 读 杖 这 框 
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图 14-2 定义 网 页 border 区 域 


@¥ 在 给 元 素 设置 background-color 背景 色 时 ，IE 作用 的 区 域 为 contenttpadding， 而 


上 Firefox 则 是 contenttpadding+border。 这 点 在 border 为 粗 虚 线 时 特别 明显 。 


14.1.3 ”案例 2 一 一 网 页 padding 区 域 定义 


在 CSS 中 ， 可 以 设置 padding 属性 定义 内 容 与 边框 之 间 的 距离 ， 即 内 边 距 。 语 法 格式 
如 下 。 

padding : length 

padding 属性 值 可 以 是 一 个 具体 的 长 度 ， 也 可 以 是 一 个 相对 于 上 级 元 素 的 百分比 ， 但 不 可 
以 使 用 负 值 。 当 设置 值 为 百分数 时 ， 百 分 数值 是 相对 于 其 父 元 素 的 width 计算 的 ， 这 一 点 与 
外 边 距 一 样 。 所 以 ， 如 果 父 元 素 的 width 改变 ， 其 值 也 会 改变 。 
padding 属性 能 为 盒子 定义 上 、 下 、 左 、 右 间隙 的 宽度 ， 也 可 以 单独 定义 各 方位 的 宽度 。 
形式 如 下 。 


padding :padding-top | padding-right | padding-bottom | padding-left 


如 果 提 供 4 个 参数 值 ， 将 按 顺 时 针 的 顺序 作用 于 四 边 。 如 果 只 提供 1 个 参数 值 ， 将 用 于 
全 部 的 4 条 边 ， 如 果 提 供 2 个 ， 第 1 个 作用 于 上 下 两 边 ， 第 2 个 作用 于 左右 两 边 ， 如果 提供 3 
个 ， 第 1 个 用 于 上 边 ， 第 2 个 用 于 左右 两 边 ， 第 3 个 用 于 下 边 。 

其 具体 含义 如 表 14-1 所 示 。 


出 


表 14-1 padding 属性 的 子 属性 


属 性 描 述 
_padding-top 设 定 上 间 际 
_padding-bottom 设 定 下 间隙 
_padding-left 设 定 左 间隙 
adding-right 设 定 右 间隙 


【 例 14.2】 定义 网 页 padding 区 域 (实例 文件 : chl4\14.2.html)。 
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<html> 
<head> 
<title>padding</title> 
<style type="text/css"> 
-waif 
width:400px; 
height:250px; 
border:lpx #993399 solid; 
} 
img{ 
max-height:120px; 
padding-left:50px; 
padding-top:20px; 
} 
</style> 
</head> 
<body> 
<div class="wai"> 
<img src="13.jpg" /> 
<p> 这 张 图 片 的 左 内 边 距 是 50px， 顶 内 边 距 是 20px</p> 
</div> 
</body> 
</html> 


在 IE 中 浏览 效果 如 图 14-3 所 示 ， 可 以 看 到 在 一 个 DIV 层 中 显示 了 一 个 图 片 ， 并 定义 
了 图 片 的 左 内 边 距 和 上 内 边 距 的 效果 。 可 以 看 出 ， 内 边 距 其 实 是 对 象 img 和 外 层 DIV 之 间 的 
距离 。 
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14-3 ”定义 网 页 padding 区 域 
14.1.4 ”案例 3 一 一 网 页 margin 区 域 定义 


margin 边界 用 来 设置 页 面 中 元 素 和 元 素 之 间 的 距离 ， 即 定义 元 素 周围 的 空间 范围 ， 是 页 
面 排版 中 一 个 比较 重要 的 概念 。 
其 语法 格式 如 下 。 


margin : auto | length 


其 中 ，auto 表示 根据 内 容 自动 调整 ，length 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 
百分数 。 百 分 数 是 基于 其 父 对 象 的 高 度 计算 的 。 对 内 联 对 象 来 说 ， 左 右 外 延边 距 可 以 是 负数 值 。 
margin 属性 包含 的 4 个 子 属性 可 控制 一 个 页 面 元 素 的 四 周 的 边 距 样式 ， 如 表 14-2 所 示 。 
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表 14-2 margin 属性 的 子 属性 


margin-top 


margin-bottom 


-left 


各 子 属性 的 属性 值 同样 可 以 是 一 个 确定 的 长 度 ， 也 可 以 是 一 个 百分比 ， 该 百分比 是 相对 
于 其 父 元 素 的 宽度 (width) 计 算 的。 
在 给 margin 设置 值 时 ， 如 果 提 供 4 个 参数 值 ， 将 按 顺 时 针 的 顺序 作用 于 四 边 。 如 果 只 
提供 1 个 参数 值 ， 将 用 于 全 部 的 4 条 边 ， 如 果 提 供 2 个 ， 第 1 个 作用 于 上 下 两 边 ， 第 2 个 作 
用 于 左右 两 边 ， 如 果 提 供 3 个 ， 第 1 个 作用 于 上 边 ， 第 2 个 作用 于 左右 两 边 ， 第 3 个 作用 于 
下 边 。 
如 果 和 希望 很 精确 地 控制 块 的 位 置 ， 需 要 对 margin 有 更 深入 的 了 解 。margin 设置 可 以 分 为 
行内 元 素 块 之 间 设 置 、 非 行内 元 素 块 之 间 设 置 和 父子 块 之 间 设 置 。 
1. 行内 元 素 块 之 间 的 margin 设置 
【 例 14.3】 设置 行内 元 素 margin( 实 例文 件 ，ch14\14.3.html)。 
<html> 
<head> 
<title> 行 内 元 素 设置 margin</title> 
<style type="text/css"> 
<!-- 
spant{ 
background-color:#a2d2ff; 
text-align:center; 
font-family:" 幼 圆 
font-size:12px; 
padding:10px; 
border:lpx #ddeecc solid; 


: 

span.left{ 
margin-right:20px; 
background-color:#a9d6ff; 

| 

span.right{ 
margin-left:20px; 
background-color:#eeb0b0; 

有 

一 -> 

</style> 
</head> 

<body> 
<span class="left"> 行 内 元 素 1</span><span class="right"> 行 内 元 素 2</span> 

</body> 

</html> 


a 


在 下 9.0 中 浏览 效果 如 图 14-4 所 示 ， 可 以 看 到 一 个 Ea 
蓝 色 盒子 和 红色 盒子 ， 二 者 之 间 的 距离 使 用 margin 设 。 | ee 
置 ， 其 距离 是 左边 盒子 的 右边 距 margin-right 加 上 右边 傅 ”| 证 滞 。 国 滞 
子 的 左边 距 margin-left。 


2， 非 行内 元 素 块 之 间 的 margin 设置 


如 果 不 是 行内 元 素 ， 而 是 产生 换行 效果 的 块 级 元 
素 ， 情 况 就 可 以 发 生变 化 。 两 个 换行 块 级 元 素 之 间 的 距 
离 不 再 是 margin-bottom 和 margin-top 的 和 ， 而 是 两 者 中 
的 较 大 者 。 

【 例 14.4】 ” 非 行 内 元 素 块 之 间 的 margin 设置 (实例 文件 :ch14\14.4.html)。 


<html> 
<head> 
<title> 块 级 元 素 的 margin</title> 
<style type="text/css"> 
== 
hli 
background-color:#ddeecc; 
text-align:center; 
font-family:" 幼 圆 "; 
font-size:12px; 
padding:10px; 
border:lpx #445566 solid; 
display:block; 


14-4 定义 margin 区 域 


祁 济 路 肿 相 加 二 河 到 一 一 自 菌 路 肿 沼 到“ 坤 了 } 小 全 


IGG 


} 
--> 
</style> 
</head> 
<body> 
<hl style="margin-bottom:50px;"> 距 离 下 面 块 的 距离 </h1> 
<hl style="margin-top:30px;"> 距 离 上 面 块 的 距离 </h1> 
</body> 
</html> 
在 正 90 中 浏览 效果 如 图 14-5 所 示 ， 可 以 看 到 两 。 se 时 
个 hl 盒子 ， 二 者 上 下 之 间 存 在 距离 ， 其 距离 为 margin- | 3? mse sv orm an Rm 
bottom 和 margin-top 中 较 大 的 值 ， 即 50 像素 。 如 果 修 
改 下 面 hl 盒子 元 素 的 margin-top 为 40 像素 ， 会 发 现 执 
行 结果 没有 任何 变化 。 如 果 修 改 其 值 为 60 像素 ， 会 发 
现下 面 的 盒子 会 向 下 移动 10 个 像素 。 


3. 父子 块 之 间 的 margin 设置 
当 一 个 DIV 块 包含 在 另 一 个 DIV 块 中 间 时 ， 二 者 图 14-5 ”内 元 素 块 之 间 的 margin 设置 


便 会 形成 一 个 典型 的 父子 关系 。 其 中 子 块 的 margin 设置 将 会 以 父 块 的 content 为 参考 。 
【 例 14.5】 父子 块 之 间 的 margin 设置 (实例 文件 : ch14\14.5.html)。 
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<html> 

<head> 

<title> 包 含 块 的 margin</title> 

<style type="text/css"> 

-= 

divt{ 
background-color:#fffebb; 
padding:10px; 
border:lpx solid #000000; 

} 

hli 
background-color:#a2d2ff; 
margin-top:0px; 
margin-bottom: 30px; 
padding:15px; 
border:lpx dashed #004993; 

text-align:center; 

font-family:" 幼 圆 "; 
font-size:12px; 

} 

--> 

</style> 
</head> 

<body> 
<div > 

<h1> 子 块 div</h1> 

</div> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 14-6 所 示 ， 可 以 看 到 子 块 pe 
hl 盒子 距离 父 DIV 下 边界 为 40 像素 ( 子 块 30 像素 的 外 边 。 | zn ma sa ceaw za wom 
距 加 上 父 块 10 像素 的 内 边 距 )， 其 他 3 边 距离 都 是 父 块 的 
padding 距离 ， 即 10 像素 。 

在 上 例 中 ， 如 果 设 定 了 父 元 素 的 高 度 height 值 ， 并 且 
父 块 高 度 值 小 于 子 块 的 高 度 加 上 margin 的 值 ， 此 时 正 浏 
览 器 会 自动 扩大 ， 保 持 子 元 素 的 margin-bottom 的 空间 以 
及 父 元 素 的 padding-bottom。 而 Firefox 就 不 会 这 样 ， 会 
保证 父 元 素 的 height 高 度 的 完全 吻合 ， 而 这 时 子 元 素 将 超 图 14-6 父子 块 之 间 的 Margin 设置 
过 父 元 素 的 范围 。 

当 将 margin 设置 为 负数 时 ， 会 使 得 被 设 为 负数 的 块 向 相反 的 方向 移动 ， 甚 至 覆盖 在 另外 
的 块 上 。 


14.2 ”弹性 盒 模 型 


CSS 引入 了 新 的 盒子 模型 处 理 机 制 ， 即 弹性 盒 模型 。 该 模型 决定 元 素 在 盒子 中 的 分 布 方 
式 以 及 如 何 处 理 盒子 的 可 用 空间 。 通 过 弹性 盒 模型 ， 可 以 轻松 地 设计 出 自 适 应 浏览 器 窗口 的 
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流动 布局 或 自 适应 字体 大 小 的 弹性 布局 。 Es 

CSS 为 弹性 盒 模型 新 增 了 8 个 属性 ， 如 表 14-3 所 示 。 章 

表 14-3 CSS 新 增 弹 性 盒 模型 属性 罗 

属 性 说 明 二 

box-orient 定义 盒子 分 布 的 坐标 轴 于 
box-align 定义 子 元 素 在 盒子 内 垂直 方向 上 的 空间 分 配方 式 疯 
box-direction 定义 盒子 的 显示 顺序 页 
box-flex 定义 子 元 素 在 盒子 内 的 自 适应 尺寸 
box-flex-group 定义 自 适 应 子 元 素 群 组 
box-lines 定义 子 元 素 分 布 显 示 苇 
box-ordinal-group_ 定义 子 元 素 在 盒子 内 的 显示 位 置 术 


定义 子 元 素 在 盒子 内 的 水 平方 向 上 的 空间 分 配方 式 


box-pack 


GG 


14.2.1 案例 4 一 一 盒子 布局 取向 box-orient 
box-orient 属性 用 于 定义 盒子 元 素 内 部 的 流动 布局 方向 ， 即 是 横着 排 还 是 竖 着 走 。 
语法 格式 如 下 。 
box-orient:horizontal | vertical | inline-axis | block-axis | inherit 
其 属性 值 含义 如 表 14-4 所 示 。 


表 14-4 box-orient 属性 值 


horizontal 盒子 元 素 从 左 到 右 在 一 条 水 平 线 上 显示 它 的 子 元 素 
Vertical 盒子 元 素 从 上 到 下 在 一 条 垂直 线 上 显示 它 的 子 元 素 
inline-axis | 盒子 元 素 沿 着 内 联 轴 显 示 它 的 子 元 素 


block-axis 盒子 元 素 沿 着 块 轴 显 示 它 的 子 元 素 


全 下 面 代码 中 会 存在 一 些 Firefox 浏览 器 的 私有 属性 定义 ， 这 是 因为 IE 9.0 浏览 器 
| 长 不 支持 新 念 子 布局 属性 。 


【 例 14.6】 盒子 布局 取向 box-orient 属性 的 实例 (实例 文件 : chl4\14.6.htmD)。 


<html> 

<head> 

<title> 

box-orient 

</Eitle> 

<style> 

div{height:50px;text-align:center;} 
-dl{background-color:#F6F;width:180px;height:500px} 
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.d2{background-color:#3F9;width:600px;height:500px} 
-d3{background-color:#FCd;width:180px;height:500px} 
body{ 
display:box; /* 标 准 声明 ， 盒 子 显 示 */ 
display:-moz-box7/* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
orient:horizontal7/* 定 义 元 素 为 盒子 显示 */ 
-mozbox-box-orient:horizontal7/* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
box-orient:horizontal;/*CSS 标准 化 设置 */ 
上 
</style> 
</head> 
<body> 
<div class=d1> 左 侧 布局 </div> 
<div class=d2> 中 间 布 局 </div> 
<qdiv class=d3> 右 侧 布局 </div> 
</body> 
</html> 


上 面 代码 中 ，CSS 样式 首先 定义 了 每 个 DIV 层 的 背景 色 和 大 小 ， 在 body 标签 选择 器 
中 ， 定 义 了 body 容器 中 元 素 以 盒子 模型 显示 ， 并 使 用 box-orient 定义 元 素 水 平 并 列 显示 。 

在 Firefox 中 浏览 效果 如 图 14-7 所 示 ， 可 以 看 到 显示 了 3 个 层 ，3 个 DIV 层 并 列 显示 ， 
分 别 为 “ 左 侧 布局 ”“ 中 间 布 局 ”和 “ 右 侧 布局 ”。 
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图 14-7 ”盒子 布局 取向 
14.2.2 ”案例 5 一 一 盒子 布局 顺序 box-direction 


box-direction 属性 用 于 确定 子 元 素 的 排列 顺序 ， 也 可 以 说 是 内 部 元 素 的 流动 顺序 。 
语法 格式 如 下 。 


box-direction:normal | reverse | inherit 


其 属性 值 如 表 14-5 所 示 。 


表 14-5 box-direction 属性 值 


属性 值 说 明 
正常 显示 顺序 ， 即 如 果 盒 子 元 素 的 box-orient 属性 值 为 horizontal， 则 其 包含 的 子 元 素 按 
normal 照 从 左 到 右 的 顺序 显示 ， 即 每 个 子 元 素 的 左边 总 是 靠近 前 一 个 子 元 素 的 右边 ， 如 果 盒 子 
元 素 的 box-orient 属性 值 为 vertical， 则 其 包含 的 子 元 素 按照 从 上 到 下 的 顺序 显示 
Teverse 反 向 显示 ， 盒 子 所 包含 的 子 元 素 的 显示 顺序 将 与 normal 相反 
inherit 继承 上 级 元 素 的 显示 顺序 


【 例 14.7】 盒子 布局 顺序 box-direction 属性 的 实例 (实例 文件 : chl4\14.7.html)。 


<html> 

<head> 

<title> 

box-direction 

</title> 

<style> 

div{height:50px;text-align:center;} 

.dl{background-color:#F6F;width:180px;height:500px} 

.d2{background-color:#3F9;width:600px;height:500px} 

.d3{background-color:#FCd;width:180px;height:500px} 

body{ 
display:box;/* 标 准 声明 ， 盒 子 显示 */ 
display:-moz-box;/* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
orient:horizontal;/* 定 义 元 素 为 盒子 显示 */ 
-mozbox-box-orient:horizontal;/* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
box-orient:horizontal;/*CSS 标准 声明 */ 
-moz-box-direction:reverse; 
box-direction:reverse; 


， 

</style> 

</head> 

<body> 

<div class=d1> 左 侧 布局 </div> 
<div class=d2> 中 间 布 局 </div> 
<div class=d3> 右 侧 布局 </div> 
</body> 

</html> 


可 以 发 现 此 实例 代码 和 上 一 个 实例 代码 基本 相同 ， 只 不 过 多 了 一 个 box-direction 属性 设 


置 ， 此 处 设置 布局 进行 反 向 显示 。 
在 Firefox 中 浏览 效果 如 图 14-8 所 示 ， 可 以 发 现 与 上 一 个 图 形 相 比较 ， 左 侧 布局 和 右 侧 
布局 进行 了 互 换 。 


型 
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图 14-8 盒子 布局 顺序 


14.2.3 ”案例 6 一 一 盒子 布局 位 置 box-ordinal-group 


box-ordinal-group 属性 设置 每 个 子 元 素 在 盒子 中 的 具体 位 置 。 
语法 格式 如 下 。 
box-ordinal-group:<integer> 


参数 值 integer 是 一 个 自然 数 ， 从 1 开始 ， 用 来 设置 子 元 素 的 位 置 序号 。 子 元 素 将 根据 这 
个 属性 从 小 到 大 进行 排列 。 在 默认 情况 下 ， 子 元 素 将 根据 元 素 的 位 置 进行 排列 。 
【 例 14.8】〗】 盒子 布局 位 置 box-ordinal-group 属性 的 实例 (实例 文件 : ch14\14.8.html)。 


<html> 

<head> 

EUELE> 

box-ordinal-group 

</title> 

<style> 

body{ 

margin:0; 

padding:0; 
text-align:center 
background-color:#d9bfe8; 

3 

.box{ 

margin:auto; 
text-align:center; 
width:988px; 
display:-moz-box; 
display:box; 
box-orient:vertical; 
-moz-box-orient:vertical; 

} 

-boxli 
-moz-box-ordinal-group:27 
box-ordinal-group:2; 

和 

.box2{ 
-moz-box-ordinal-group:3; 
box-ordinal-group:3; 


-box31 


-moz-box-ordinal-group:17 
box-ordinal-group:1; 


.box4{ 


} 


-moz-box-ordinal-group:47 
box-ordinal-group:4; 


</style> 
</head> 
<body> 


<div 
<div 
<div 


<div class=box3><img src=3.jpg/></div> 

<div class=box4><img src=4.jpg/></div> 

</div> 

</body> 

</html> NN 
在 上 面 的 样式 代码 中 ， 类 选择 器 box 中 的 代码 display:box 设置 了 容器 以 盒子 方向 显示 ， 


box-orient:vertical 代码 设置 排列 方向 从 上 到 下 。 在 下 面 的 box1、box2、box3 和 box4 类 选择 器 


class=box> 
class=boxl><img src=1.jpg/></div> 
class=box2><img src=2.jpg/></div> 


中 通过 box-ordinal-group 属性 都 设置 了 显示 顺序 。 


在 Firefox 中 浏览 效果 如 图 14-9 所 示 ， 可 以 看 到 第 三 个 层次 显示 在 第 一 个 和 第 二 个 层次 


之 上 上; 


ETT TT -c 


Bai 代 本 


2 可 mn | EE 


所 并 网 页 及 号 知 进 Wey 一 睛 下 蚌 本国 


er | 
e Ho 3 
amen J sane psn sm se eae) 
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图 14-9 ”盒子 布局 位 置 
14.2.4 ”案例 7 一 一 盒子 弹性 空间 box-flex 


box-flex 属性 能 够 灵活 地 控制 子 元 素 在 盒子 中 的 显示 空间 。 显 示 空 间 包 括 子 元 素 的 宽度 和 
高 度 ， 而 不 只 是 子 元 素 所 在 栏目 的 宽度 ， 也 可 以 说 是 子 元 素 在 盒子 中 所 占 的 面积 。 

语法 格式 如 下 。 

box-flex:<number> 

<number> 属 性 值 是 一 个 整数 或 者 小 数 。 当 盒子 中 包含 多 个 定义 了 box-flex 属性 的 子 元 素 
时 ， 浏 览 器 将 会 把 这 些 子 元 素 的 box-flex 属性 值 相 加 ， 然 后 根据 它们 各 自 的 值 占 总 值 的 比例 
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来 分 配 盒子 剩余 的 空间 。 


Sn box-flex 属性 只 有 在 盒子 拥有 确定 的 空间 大 小 时 才能 够 正确 解析 ， 即 为 盒子 定义 
”具体 的 width 和 height 属性 值 。 


【 例 14.9】 盒子 弹性 空间 box-flex 属性 的 实例 (实例 文件 ，ch14\14.9.html)。 


<html> 

<head> 

<titlie> 

box-flex 

</title> 

<style> 

body{ 

margin:0; 

padding:0; 

text-align:center; 

1 

.box{ 

height:50px; 

text-align:center; 

width:960px; 

overflow:hidden; 

display:box; /* 标 准 声明 ， 盒 子 显示 */ 

display:-moz-box;/* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
orient:horizontal;/* 定 义 元 素 为 盒子 显示 */ 
-mozbox-box-orient:horizontal; /+* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
box-orient:horizontal;/*CSS 标准 声明 */ 


-dt 
background-color:#F6F; 
width:180px; 
height:500px; 
} 
"d2, .4d31 

border:solid lpx #CCC; 

margin:2px; 
} 
.d21{ 
-moz-box-flex:2; 
box-flex:2; 
background-color:#3F9; 
height:500px; 
-d31{ 
-moz-box-flex:4; 
box-flex:4; 
background-color:#FCd; 
height:500px; 
} 
.d2 div,.d3 div{display:inline;} 
</style> 
</head> 
<body> 


a 


<div class=box> 下 
<div class=d1> 左 侧 布 局 </div> 司 
<div class=d2> 中 间 布 局 </div> 
<div class=d3> 右 侧 布 局 </div> 网 
</div> 页 
</body> 曲 
</html> 二 
| ER 型 
上 面 的 CSS 样式 代码 中 ， 使 用 display:box 语句 设 定 容 器 内 元 素 以 盒子 方式 布局 ，box- 
orient:horizontal 语句 设 定 盒子 之 间 在 水 平方 向 上 并 列 显示 ， 在 类 选择 器 dl 中 使 用 width 和 网 
height 设 定 显示 层 的 大 小 ， 而 在 d2 和 d3 中 ， 使 用 box-flex 分 别 设 定 两 个 盒子 的 显示 面积 。 
在 Firefox 中 浏览 效果 如 图 14-10 所 示 ， 可 以 看 到 左 侧 布局 所 占 空间 比 中 间 布 局 所 占 空 昌 
间 小 。 竟 
子 
J 加 技 
Oe/DocumentskhiA Nahm “Camco ] 可 | 相间 便 汶 | 去 术 
国 及 =W 同 _) 类 EW 避 | 而 才 上 期， 条 天 网 二 四 天 二 二 ( 四 而 二 FH 才 ) 
中 同 布局 石 钢 布 局 
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14-10 ”盒子 弹性 空间 
14.2.5 “案例 8 一 一 管理 盒子 空间 box-pack 和 box-align 
当 弹 性 元 素 和 非 弹性 元 素 混 合 排版 时 ， 可 能 会 出 现 所 有 子 元 素 的 尺寸 大 于 或 小 于 盒子 的 
尺寸 ， 从 而 出 现 盒子 空间 不 足 或 者 富余 的 情况 ， 这 时 就 需要 一 种 方法 来 管理 盒子 的 空间 。 如 
果子 元 素 的 总 尺寸 小 于 盒子 的 尺寸 ， 则 可 以 使 用 box-pack 和 box-aling 属性 进行 管理 。 
box-pack 属性 可 以 用 于 设置 子 容器 在 水 平 轴 上 的 空间 分 配方 式 ， 语 法 格式 如 下 。 
box-pack:startlend|lcenter|justify 


其 属性 值 含义 如 表 14-6 所 示 。 


表 14-6 ”box-pack 属性 值 


属性 值 说 明 
stitt 所 有 子 容器 都 分 布 在 父 容器 的 左 侧 ， 右 侧 留 空 
5 所 有 子 容器 都 分 布 在 父 容器 的 右 侧 ， 左 侧 留 空 

_jusagy | 所 有 子 容器 平均 分 布 (默认 值 ) 
eit 平均 分 配 父 容器 剩余 的 空间 (能 压缩 子 容器 的 大 小 ， 并 且 有 全 局 居中 的 效果 ) 


box-align 属性 用 于 管理 子 容 器 在 紧 轴 上 的 空间 分 配方 式 ， 语 法 格式 如 下 。 


box-align: startlend|lcenter|lbaseline|stretch 


其 属性 值 含义 如 表 14-7 所 示 。 


27@ 


网 页 设计 与 网 站 建设 
案例 课堂 由 一 


表 14-7 box-align 属性 值 


属性 值 说 明 
start 子 容器 从 父 容器 顶部 开始 排列 ， 富 余 空 间 显示 在 盒子 底部 
end 子 容器 从 父 容器 底部 开始 排列 ， 富 余 空 间 显示 在 盒子 顶部 
center 子 容器 横向 居中 ， 富 余 空间 在 子 容器 两 侧 分 配 ， 上 面 一 半 下 面 一 半 
baseline 所 有 盒子 沿 着 它们 的 基线 排列 ， 富 余 的 空间 可 前 可 后 显示 
stretch 每 个 子 元 素 的 高 度 被 调整 到 适合 盒子 的 高 度 显 示 ， 即 所 有 子 容 器 和 父 容器 保持 同一 高 度 


【 例 14.10】 管理 盒子 空间 box-pack 和 box-align 的 实例 (实例 文件 : ch14\14.10.html)。 


<html> 
<head> 
<title> 
box-pack 
</title> 
<style> 
body,html{ 
height:100%; 
width:100%; 


body{ 
margin:0; 
padding:0; 
display:box; /* 标 准 声明 ， 盒 子 显 示 */ 
display:-moz-box;/* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
-mozbox-box-orient:horizontal;/* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
box-orient:horizontal;/*CSS 标准 声明 */ 
-moz-box-pack:center; 
box-pack:center; 
-moz-box-align:center; 
box-align:center; 
background:#04082b url(a.jpg) no-repeat top center; 
-box{ 


border:solid lpx red; 
padding:4px; 

</style> 

</head> 

<body> 

<div class=box> 

<img src=yueji.jpg> 
</div> 

</body> 

</html> 


上 面 代 码 中 ，display:box 语句 定义 了 容器 内 元 素 以 盒子 形式 显示 ，box-orient:horizontal 语 
句 定义 了 盒子 水 平 显示 ，box-pack:center 语句 定义 了 盒子 两 侧 空间 平均 分 配 ，box-align:center 
语句 定义 了 盒子 上 下 两 侧 平均 分 配 ， 即 图 片 盒 子 居中 显示 。 
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在 Firefox 中 浏览 效果 如 图 14-11 所 示 ， 可 以 看 到 图 片 盒子 在 容器 中 部 显示 。 


图 14-11 管理 盒子 空间 
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14.2.6 案例 9 空间 溢出 管理 box-lines 


弹性 布局 中 盒子 内 的 元 素 很 容易 出 现 空间 溢出 的 现象 ， 与 传统 的 盒子 模型 一 样 ，CSS 多 
许 使 用 overflow 属性 来 处 理 溢出 内 容 的 显示 ， 当 然 还 可 以 使 用 box-lines 属性 来 避免 空间 溢出 
的 问题 。 

语法 格式 如 下 。 

box-lines:single|lmultiple 


其 中 参数 值 single 表示 子 元 素 都 单行 或 单列 显示 ，multiple 表示 子 元 素 可 以 多 行 或 多 列 
【 例 14.11】 ”空间 溢出 管理 box-lines 的 实例 (实例 文件 ，ch14\14.11.html)。 


<html> 
<head> 
< 让 > 
box-lines 
</titye> 
<style> 
.boxf{ 
border:solid lpx red; 
width:600px; 
height:400px; 
display:box; /* 标 准 声 明 ， 盒 子 显 示 */ 
display:-moz-box;/* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
-mozbox-box-orient:horizontal; /+* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
—moz-box-lines:multiple; 
box-lines:multiple; 
1 
.box div{ 
margin:4px; 
border:solid lpx #aaa; 
-moz-box-flex:1; 
box-flex:1; 
} 
-box div img{widthl20px;} 
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</style> 

</head> 

<body> 

<div class=box> 

<div><img src="b.jpg"></div> 
<div><img src="c.jpg"></div> 
<div><img src="d.jpg"></div> 
<div><img src="e.jpg"></div> 
<div><img src="f.jpg"></div> 
</div> 

</body> 


在 Firefox 中 浏览 效果 如 图 14-12 所 示 ， 可 以 看 到 右边 盒子 还 是 发 生 溢出 现象 。 这 是 因为 
目前 各 大 主流 浏览 器 还 没有 明确 支持 这 种 用 法 ， 所 以 导致 box-lines 属性 被 实际 应 用 时 显示 无 
效 。 相 信和 在 未 来 的 一 段 时 间 内 ， 各 个 浏览 器 将 会 支持 该 属性 。 
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14-12 ”空间 溢出 管理 


14.3 ”盒子 的 定位 与 浮动 


在 CSS 中 ， 定 位 可 以 将 一 个 元 素 精确 地 放 在 页 面 上 用 户 所 指定 的 位 置 ， 而 布局 可 以 将 整 
个 页 面 的 元 素 内 容 进 行 整洁 且 完 美的 摆 放 。 定 位 的 实现 是 布局 成 功 的 前 提 。 如 果 清 晰 地 掌握 
了 定位 原理 ， 那 么 就 能 够 创建 多 种 高 级 而 精确 的 布局 ， 并 会 让 网 页 更 加 完美 地 实现 。 

网 页 中 的 各 种 元 素 需要 有 自己 合理 的 位 置 与 空间 布局 ， 从 而 搭建 整个 页 面 的 结构 。 在 
CSS 中 ， 可 以 通过 position 这 个 属性 ， 对 页 面 中 的 元 素 进行 定位 。 

语法 格式 如 下 。 


position : static | absolute | fixed | relative 


其 属性 值 如 表 14-8 所 示 。 
表 14-8 ”position 属性 值 


属性 值 说 明 


元 素 定 位 的 默认 值 ， 无 特殊 定位 ， 对 象 遵循 HTML 定位 规则 ， 不 能 通过 z-index 进行 层 
次 分 级 


static 


续 表 
属性 值 说 明 
a 相对 定位 ， 对 象 不 可 重合， 可 以 通过 left、right、bottom 和 top 等 属性 在 正常 文档 中 偏 移 
位 置 ， 可 以 通过 z-index 进行 层次 分 级 
a 生成 绝对 定位 的 元 素 ， 相 对 于 static 定位 以 外 的 第 一 个 父 元 素 进行 定位 。 元 素 的 位 置 通 
过 1left、top、right 及 bottom 属性 进行 规定 
本 fixed 生成 绝对 定位 的 元 素 ， 相 对 于 浏览 器 窗口 进行 定位 。 元 素 的 位 置 通过 left、top、 


Tight 及 


bottom 属性 进行 规定 


14.3.1 案例 10 一 一 相对 定位 


如 果 对 一 个 元 素 进行 相对 定位 ， 首 先 它 将 出 现在 它 所 在 的 位 置 上 。 然 后 通过 设置 垂直 或 
水 平 位 置 ， 让 这 个 元 素 “ 相 对 于 ” 它 的 原始 起 点 进行 移动 。 再 一 点 ， 相 对 定位 时 ， 无 论 是 否 
进行 移动 ， 元 素 仍然 占据 原来 的 空间 。 因 此 ， 移 动 元 素 会 导致 其 覆盖 其 他 框 。 


绝对 定位 与 相对 定位 的 区 别 在 于 : 绝对 定位 的 坐标 


为 上 级 元 素 的 原点 ， 与 上 级 元 素 


有 关 ， 相 对 定位 的 坐标 原点 为 本 身 偏 移 前 的 原点 ， 与 上 级 元 素 无 关 。 
相对 定位 的 语法 格式 如 下 。 
position:relative 


盒子 的 相对 定位 实例 (实例 文件 : chl4\14.12.htmD。 


【 例 14.12】 


<html> 
<head> 


<style type="text/css"> 
h2.pos left 


{ 


position:relative; 
left:-20px 


} 


h2.pos right 


{ 


position:relative; 


left:20px 
</style> 
</head> 
<body> 


<h2> 这 是 位 于 正常 位 置 的 标题 </h2> 

<h2 class="pos_left"> 这 个 标题 相对 于 其 正常 位 置 向 左 移动 </h2> 
<h2 class="pos right"> 这 个 标题 相对 于 其 正常 位 置 向 右 移 动 </h2> 
<p> 相 对 定位 会 按照 元 素 的 原始 位 置 对 该 元 素 进行 移动 。</p> 

<p> 样 式 "left:-20px” 从 元 素 的 原始 左 侧 位 置 减 去 20 像素 。</p> 
<p> 样 式 "left :20px” 向 元 素 的 原始 左 侧 位 置 增加 20 像素 。</p> 


</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 14-13 所 示 ， 可 以 看 到 页 面 显示 了 3 个 标题 ， 最 上 面 的 标题 正 
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这 个 标题 相对 于 其 正常 位 置 向 左 移动 


这 个 标题 相对 于 其 正常 位 置 向 右 移动 


相对 定位 会 按照 元 又 的 原 站 位 下 对 该 元 素 进 行 物 动 。 

样 开 “laft:-20pox” 从 元 素 的 原始 左 全 位 置 减 去 20 从 来。 
样式 “left:20px” 向 元 系 的 原 她 左 俩 位 置 增 加 20 像素 。 
< 


图 14-13 ”盒子 的 相对 定位 
14.3.2 ”案例 11 一 一 绝对 定位 


绝对 定位 是 参照 浏览 器 的 左上 角 ， 配 合 top、left、bottom 和 right 进行 定位 的 ， 如 果 没 有 
设置 上 述 的 4 个 值 ， 则 默认 依据 父 级 的 坐标 原点 为 原始 点 。 绝 对 定位 可 以 通过 上 、 下 、 左 、 
右 来 设置 元 素 ， 使 之 处 在 任何 一 个 位 置 。 

在 父 层 position 属性 为 默认 值 时 ， 上 、 下 、 左 、 右 的 坐标 原点 以 body 的 坐标 原点 为 起 始 
位 置 。 绝 对 定位 的 语法 格式 如 下 。 


position:absolute 


只 要 将 上 面 的 代码 加 入 到 样式 中 ， 使 用 样式 的 元 素 就 可 以 以 绝对 定位 的 方式 显示 了 。 
【 例 14.13】 盒子 的 绝对 定位 实例 (实例 文件 : chl4\14.13.htmD) 。 


<html> 
<head> 
<title> 定 位 属性 </title> 
</head> 
<body> 

<div style="background-color: Black; width:200px; height:200px"> 

<h2 style=" position:absolute; left:80px; top:80px; width:110px; 
height:50px; 
background-color:Red; "> 这 是 绝对 定位 </h2> 

</div> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 14-14 所 示 ， 可 以 看 到 红色 元 素 框 依 据 浏 览 器 左上 角 为 原点 ， 
坐标 位 置 为 (80px,80px)， 宽 度 为 110 像素 ， 高 度 为 50 像素 。 


全 优秀 的 页 面 设计 要 能 够 适应 各 种 屏幕 分 辨 率 ， 并 且 要 能 够 保证 正常 显示 。 要 解决 
| 长 这 个 问题 ， 在 定位 时 最 好 使 用 相对 定位 。 
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图 14-14 盒子 的 绝对 定位 

的 

全 四 使 用 绝对 定位 会 产生 一 个 问题 。 目 前 ， 大 多 数 的 网 页 都 是 居中 显示 的 ， 而 且 元 素 了 池 
与 元 素 之 间 的 布局 是 紧密 的 。 而 绝对 定位 的 开始 位 置 是 浏览 器 左上 角 的 原点 ， 当 设 定 某 


各 元 素 块 边 偏 移 属性 时 ， 由 于 客户 端 屏幕 分 辨 率 的 不 同 ， 各 元 素 块 的 显示 可 能 会 有 
偏差 。 
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14.3.3 ”案例 12 一 一 固定 定位 


固定 定位 和 绝对 定位 比较 相似 ， 它 是 绝对 定位 的 一 种 特殊 形式 。 固 定 定 位 的 容器 不 会 随 
着 深 动 条 的 拖 动 而 变化 位 置 。 在 视线 中 ， 固 定 定位 的 容器 位 置 是 不 会 改变 的 。 固 定 定位 可 以 
把 一 些 特殊 效果 固定 在 浏览 器 的 视线 位 置 。 

固定 定位 的 参照 位 置 不 是 上 级 元 素 块 而 是 浏览 器 窗口 。 所 以 可 以 使 用 固定 定位 来 设 定 类 
似 传统 框架 的 样式 布局 ， 以 及 广告 框架 、 导 航 框架 等 。 使 用 固定 定位 的 元 素 可 以 脱离 页 面 
无 论 页 面 如 何 滚动 ， 始 终 处 在 页 面 的 同一 位 置 上 。 

固定 定位 的 语法 格式 如 下 。 

position:fixed 

【 例 14.14】 盒子 的 固定 定位 实例 (实例 文件 : chl4\14.14.htmD。 


<html> 
<head> 
<title>Css 固定 定位 </title> 
<style type="text/css">... 


| 
padding:0; 
margin:0; 
; 


#fixedLayer { 
width:100px; 
line-height:50px; 
background: #FC6; 
border:lpx solid #F90; 
position:fixed; 


left:10px; 
top:10px; 
. 
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</style> 
</head> 
<body> 

<div id="fixedLayer"> 固 定 不 动 </div> 
<p> 我 动 了 </p> 
<p> 我 动 了 </p> 
<p> 我 动 了 </p> 
<p> 我 动 了 </p> 
<p> 我 动 了 </p> 
<p> 我 动 了 </p> 
<p> 我 动 了 </p> 
<p> 我 动 了 </p> 
<p> 我 动 了 </p> 
<p> 我 动 了 </p> 
<p> 我 动 了 </p> 
<p> 我 动 了 </p> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 14-15 所 示 ， 可 以 看 到 拉动 滚动 条 时 ， 无 论 页 面 内 容 怎 么 变 
化 ， 其 黄色 框 “固定 不 动 ”始终 处 在 页 面 左上 角 顶 部 。 
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14.3.4 ”案例 13 一 一 盒子 的 浮动 


除了 使 用 position 进行 定位 外 ， 还 可 以 使 用 float 定位 。float 定位 只 能 在 水 平方 向 上 定 
而 不 能 在 垂直 方向 上 定位 。float 属性 表示 浮动 属性 ， 它 用 来 改变 元 素 块 的 显示 方式 。 
语法 格式 如 下 。 


float : none | left |right 


其 属性 值 如 表 14-9 所 示 。 


位 


表 14-9 float 属性 值 


元 素 不 浮动 
浮动 在 左面 
浮动 在 右面 


两 个 小 矩形 框 ， 并 且 并 列 显示 。 


实际 上 ， 使 用 float 可 以 实现 两 列 布局 ， 也 就 是 让 一 个 元 素 在 左 浮 动 ， 一 个 元 素 在 右 浮 
并 控制 好 这 两 个 元 素 的 宽度 。 
【 例 14.1S】 盒子 浮动 的 实例 (实例 文件 :ch1l4\14.15-htmD) 。 


<html> 
<head> 
<title>float 定位 </title> 
<style> 
a 
padding:0px; 
margin:0px; 


} 
.big { 
width:600px; 
height:100px; 
margin:0 auto 0 auto; 
border:#332533 lpx solid; 


究 济 路 肿 嫩 凶 讲 涛 避 一 一 身 


} 
-One { 
width:300px; 
height:20px; 
float:left; 
border:#996600 lpx solid; 
} 
.two { 
width:290px; 
height:20px; 
float:right; 
margin-left:Spx; 
display:inline; 
border:#FF3300 lpx solid; 
</style> 
</head> 
<body> 
<div class="big"> 
<DIV class="one"> 
<p> 非 诚 勿 扰 </p> 
</DIV> 
<DIV class="two"> 
<p> 达 人 秀 </p> 
</DIV> 
</div> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 14-16 所 示 ， 可 以 看 到 显示 了 一 个 大 矩形 框 ， 大 和 矩形 框 中 存在 
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图 14-16 盒子 浮动 定位 


使 用 float 属性 不 但 改变 元 素 的 显示 位 置 ， 同 时 会 对 相 邻 内 容 造 成 影响 。 定 义 了 float 属性 
的 元 素 会 覆盖 在 其 他 元 素 上 ， 而 被 覆盖 的 区 域 将 处 于 不 可 见 状 态 。 使 用 该 属性 能 够 实现 内 容 
环绕 图 片 的 效果 。 

如 果 不 想 让 float 下 面 的 其 他 元 素 浮动 环绕 在 该 元 素 周围 ， 可 以 使 用 CSS 属性 clear， 清 
除 这 些 浮动 元 素 。 

clear 的 语法 格式 如 下 。 


clear : none | left |right | both 


其 中 ，none 表示 允许 两 边 都 可 以 有 浮动 对 象 ， both 表示 不 允许 有 浮动 对 象 ，left 表示 不 
允许 左边 有 浮动 对 象 ;right 表示 不 允许 右边 有 浮动 对 象 。 使 用 float 以 后 ， 在 必要 的 时 候 就 需 
要 通过 clear 语句 清除 float 带 来 的 影响 ， 以 免 出 现 “ 其 他 DIV 跟着 浮动 ”的 效果 。 


14.4 ”实战 演练 一 一 图 文 排版 效果 


一 个 宣传 页 ， 需 要 包括 文字 和 图 片 信 息 。 本 实例 将 结合 前 面 学 习 的 盒子 模型 及 其 相关 属 
性 ， 创 建 一 个 旅游 宣传 页 。 有 具体 步骤 如 下 。 

整个 宣传 页 面 ， 需 要 一 个 DIV 层 包含 并 带 有 边框 ，DIV 层 包 括 两 个 部 分 ， 上 部 空间 包含 
一 张 图 片 ， 下 面 显 示 文 本 信息 并 带 有 底 边 框 ， 下 部 空间 显示 两 张 图 片 。 实 例 完成 后 ， 效 果 如 
图 14-17 所 示 。 

EGR 构建 HIML 页 面 ， 使 用 DIV 搭建 框架 。 


<html> 

<head> 

<title> 图 文 排版 </title> 

</head> 

<body> 

<div class="big"> 
<div class="up"> 
<img src="top.jpg" border="0" /> 

<p>。 反 季 游 正 流行 众 信 旅 游 暑期 邀 你 到 南半球 过 冬 </p> 
<p> “西安 世 园 会 暨 旅游 推介 会 今日 在 沈阳 举行 ! </p> 
<p> “澳大利亚 旅 游 局 中 国 区 首 代 邓 李 宝 英 八 月 底 印 任 </p> 
<p> ““ 彩 虹 部 落 ” 土 族 : 旅 游 经 济 支撑 下 的 文化 记忆 恢复 (组 图 ) </p> 


</div> 


<div class="down"> 


<img src="bottoml.jpg" border="0" />gnbsp;&nbsp;&nbsp;&nbsp;<img 


src="bottom2.jpg" border="0" /> 
</div> 
</div> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 14-18 所 示 ， 可 以 看 到 页 面 自 上 向 下 ， 显 示 图 片 、 段 落 信息 和 


图 片 。 


Dene ep-o] oe 
本 


Ei 


ed] 
和 


说 -要 


添加 CSS 代码 ， 修 饰 整体 DIV。 


<style> 
| 
padding:0px; 
margin:O0px; 
} 
body{ 
font-family: "宋体"; 
font-size:12px; 
} 
.big{ 
width:220px; 
border:#0033FF lpx solid; 
margin:l0px 0 0 20px; 
} 
</style> 


CSS 样式 代码 在 body 标志 选择 器 中 设置 了 字形 和 字体 大 小 ， 
整个 层 的 宽度 、 边 框 样式 和 外 边 距 。 


内 显示 ， 其 边框 颜色 为 蓝 色 ， 大 小 为 1 像素 。 
本 ZY 添加 CSS 代码 ， 修 饰 字体 和 图 片 。 


-up Pi 
margin:S5px; 


ee Darampoomeown BD -©| OO EY 
E23 EE 


NP REE EM CHA IaM WW 


“ 乓 季 涡 王 流行 从 信 你 游 呈 期 趋 你 到 南半球 过 入 

“再 安 世 国会 昨 林 游 推介 会 今日 在 沈阳 举行 | 

“ 当 大 利 亚 旅游 局 中 国 区 百代 3 本 守 疝 八 月 底 若 任 
吏 虹 部委 ”二 才 :于 消 经 济 支 皖 下 的 六 化 记忆 相生 组 


i 反 


图 14-17 ”旅游 宣传 页 14-18 ”构建 HTML 页 面 


庆 济 路 肿 相 名 韩 沿 到 一 一 幅 菌 路 肿 当 到“ 塌 了 了 } 小 上 


IGG 


并 在 big 类 选择 器 中 设置 了 


在 正 9.0 中 浏览 效果 如 图 14-19 所 示 ， 可 以 看 到 页 面 图 片 信息 和 文本 都 在 一 个 矩形 盒子 
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} 

-up img{ 
margin:S5px; 
text-align: 

.down{ 
text-align: 
border-top: 
} 

.down img{ 
margin-top:S5px; 


} 


center;} 


center; 
#FFO0000 lpx dashed; 


为 5 像素， 两 个 图 片 之 间 的 距离 是 10 像素 。 


线 ， 宽 度 为 1 像素 。 


ee Ero 


14-19 ”设置 整体 DIV 样式 


在 下 9.0 中 浏览 效果 如 图 14-20 所 示 ， 


上 面 的 代码 定义 了 段落 、 图 片 的 外 边 距 ， 如 margin-top:5px 语句 设置 了 下 面 图 片 的 外 边 距 


可 以 看 到 字体 居中 显示 ， 下 面 带 有 一 个 红色 虚 


ee 
LE "23 


人 EER a 了 Im Ha 


| 测 大 于 玉芝 风 中 国共 人 和 字 宣 本 


| 


rT 
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14-20 设置 各 个 元 素 外 边 距 


14.5” 跟 我 练 练 手 


14.5.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
14.5.2 上 机 练习 


练习 1: 使 用 盒子 模型 设 定 网 页 布局 。 
练习 2: 使 用 弹性 盒 模型 设 定 网 页 布局 。 
练习 3: 进行 盒子 的 定位 与 浮动 设置 。 
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14.6 高 手 甜 点 


甜点 1: margin:0 auto 表示 什么 含义 


margin:0 auto 定义 元 素 向 上 补 白 0 像素 ， 左 右 自动 调整 。 这 样 按照 浏览 器 的 解析 习惯 是 
可 以 让 页 面 居 中 显示 的 ， 一 般 这 个 语句 会 用 在 body 标签 中 。 在 使 用 margin:0 auto 语句 使 页 面 
居中 的 时 候 ， 一 定 要 给 元 素 一 个 高 度 并 且 不 要 让 元 素 浮动 ， 即 不 要 加 float， 否 则 效果 失效 。 


甜点 2: 如 何 理 解 margin 的 加 倍 问题 


当 DIV 层 被 设置 为 float 时 ， 在 下 下 设置 的 margin 会 加 倍 。 这 是 一 个 正 中 存在 的 bug。 
其 解决 办 法 是 ， 在 这 个 DIV 里 面 加 上 “display:inline;”。 
例如 : 


<#div id="imfloat"></#DIV> 


相应 的 CSS 为 : 


#imFloat{ 
float:left; 
margin:S5px; 
display:inline; 


} 
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div> 标 签 的 分 块 ， 然 后 对 各 个 块 进行 CSS 
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使 用 CSS 布局 网 页 是 一 种 很 新 的 概念 ， 完 全 区 别 于 传统 的 网 页 布局 习惯 。 它 


将 页 面 首先 在 整体 上 进行 < 


> 


在 各 个 块 中 添加 相应 的 内 容 。 本 章 就 来 介绍 网 页 布局 当中 的 一 些 典型 范例 。 
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网 页 设计 与 网 站 建设 
案例 课堂 ~ 


15.1 使 用 CSS 排版 


DIV 在 CSS+DIV 页 面 排版 中 是 一 个 块 的 概念 ，DIV 的 起 始 标签 和 结束 标签 之 间 的 所 有 内 
容 都 是 用 来 构成 这 个 块 的 ， 其 中 所 包含 的 元 素 特性 由 DIV 标签 的 属性 来 控制 ， 或 者 是 通过 使 
用 样式 表格 式 化 这 个 块 来 进行 控制 。CSS+DIV 页 面 排版 思想 是 首先 在 整体 上 进行 <div> 标 签 
的 分 块 ， 然 后 对 各 个 块 进行 CSS 定位 ， 最 后 再 在 各 个 块 中 添加 相应 的 内 容 。 


15.1.1 案例 1 一 一 将 页 面 用 DIV 分 块 


使 用 DIV+CSS 页 面 排版 布局 ， 需 要 对 网 页 有 一 个 整体 构思 ， 即 网 页 可 以 划分 为 几 个 部 
分 。 例 如 上 中 下 结构 ， 或 是 左右 两 列 结构 ， 还 是 三 列 结构 。 这 时 就 可 以 根据 网 页 构思 ， 将 页 
面 划分 为 几 个 DIV 块 ， 用 来 存放 不 同 的 内 容 。 当 然 了 ， 大 块 中 还 可 以 存放 不 同 的 小 块 。 最 
后 ， 通 过 CSS 属性 ， 对 这 些 DIV 进行 定位 。 

在 现在 的 网 页 设计 中 ， 一 般 情 况 下 的 网 站 都 是 上 中 下 结构 ， 即 上 面 是 页 头 ， 中 间 是 页 面 
主体 ， 最 下 面 是 页 脚 ， 整 个 上 中 下 结构 最 后 放 到 
一 个 DIV 容器 中 ， 方 便 控 制 。 页 头 一 般 用 来 存放 
Logo 和 导航 菜单 ， 页 面 主体 包含 页 面 要 展示 的 信 
息 、 链 接 、 广 告 等 ， 页 脚 存放 的 是 版 权 信息 、 联 


整体 页 而 容器 


页 头 


页 面 主体 


系 方式 等 。 
将 上 中 下 结构 放置 到 一 个 DIV 容器 中 ， 方 便 后 更 
面 排版 并 且 方便 对 页 面 进行 整体 调整 ， 如 图 15-1 
所 示 。 图 15-1 上 中 下 网 页 布局 结构 


15.1.2 “案例 2 一 一 设置 各 块 位 置 


复杂 的 网 页 布局 ， 不 是 单纯 的 一 种 结构 ， 而 是 包含 多 种 网 页 结构 。 例 如 ， 总 体 上 是 上 中 
下 ， 中 间 内 分 为 两 列 布局 等 ， 如 图 15-2 所 示 。 


整体 页 面容 器 


页 头 


页 面 主体 左 侧 页 面 主体 右 侧 


页 肢 


15-2 ”复杂 的 网 页 布局 结构 


页 面 总 体 结构 确认 后 ， 一 般 情 况 下 ， 页 头 和 页 脚 变 化 就 不 大 了 。 会 发 生变 化 的 就 是 页 面 
主体 ， 此 时 需要 根据 页 面 展 示 的 内 容 ， 决 定 中 间 布 局 采用 什么 样式 ， 三 列 水 平分 布 还 是 两 列 
分 布 等 。 


二 
- 282 


15.1.3 “案例 3 一 一 用 CSS 定位 


页 


页 面 版 式 确定 后 ， 就 可 以 利用 CSS 对 DIV 进行 定位 ， 使 其 在 指定 位 置 出 现 ， 从 而 实现 对 
的 整体 规划 ， 然 后 再 向 各 个 页 面 添加 内 容 。 
下 面 创建 一 个 总 体 为 上 中 下 布局 、 页 面 主体 布局 为 左右 布局 的 页 面 ， 使 用 CSS 进行 定位 。 


1. 创建 HTML 页 面 ， 使 用 DIV 构建 层 
首先 构建 HTML 网 页 ， 使 用 DIV 划分 最 基本 的 布局 块 ， 其 代码 如 下 。 


<html> 
<head> 
<title>CSS 排版 </title><body> 
<div id="container"> 
<div id="banner"> 页 面 头 部 </div> 
<div id=content > 
<div id="right"> 
页 面 主体 右 侧 
</div> 
<div id="left"> 
页 面 主体 左 侧 
</div> 
</div> 
<div id="footer"> 页 脚 </div> 
</div> 
</body> 
</html> 


上 面 代码 中 ,创建 了 5 个 层 ， 其 中 ID 名 称 为 container 的 DIV 层 ， 是 一 个 布局 容器 ， 即 


所 有 的 页 面 结构 和 内 容 都 是 在 这 个 容器 内 实现 ， 名 称 为 banner 的 DIV 层 ， 是 页 头 部 分 ; 和 


为 footer 的 DIV 层 ， 是 页 脚 部 分 ， 名 称 为 content 的 DIV 


层 ， 是 中 间 主 体 ， 该 层 包含 了 两 个 层 ， 一 个 是 right 层 , 另 。 Sows2 er] 
一 个 是 left 层 ， 分 别 放置 不 同 的 内 容 。 Wp 
在 正 中 浏览 效果 如 图 15-3 所 示 ， 可 以 看 到 网 页 中 显示 。 | 号 


了 这 几 个 层 ， 从 上 到 下 依次 排列 。 


2. 使 用 CSS 设置 网 页 整体 样式 
然后 需要 对 body 标签 和 container 层 ( 布 局 容器 ) 进 行 图 15-3 ”添加 网 页 层次 


lO0R 


CSS 修饰 ， 从 而 对 整体 样式 进行 定义 。 其 代码 如 下 。 


<style type="text/css"> 

过 

body { 
margin:0px; 
font-size:16px; 
font-family:" 幼 圆 "; 

| 

#container{ 
position:relative; 


全 


宣 进 栏 将 可 寺 AIQ+SSO 一 一 廊 坟 秒 出 下 加 寸 避 昼 由 S 小 
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width:100%; 


3 
-> 
</style> 


上 面 代码 只 是 设置 了 文字 大 小 、 字 形 、 布 局 容器 container 的 宽度 、 层 定位 方式 ， 布 局 容 
器 撑 满 整个 浏览 器 。 

在 正 中 浏览 效果 如 图 15-4 所 示 ， 可 以 看 到 此 时 相 比较 上 一 个 显示 页 面 发 生 的 变化 不 
大 ， 只 不 过 字形 和 字体 大 小 发 生变 化 ， 因 为 container 没有 边框 和 背景 色 ， 故 无 法 显示 该 层 。 


3. 使 用 CSS 定义 页 头 部 分 
接 下 来 就 可 以 使 用 CSS 对 页 头 ( 即 banner 层 ) 进 行 定位 ， 使 其 在 网 页 中 显示 。 其 代码 如 下 。 


#banner{ 
height:80px; 
border:lpx solid #000000; 
text-align:center; 
background-color:#a2d9ff; 
padding:10px; 
margin-bottom:2px; 

} 


上 面 首先 设置 了 banner 层 的 高 度 为 80 像素 ， 宽 度 充满 整个 container 布局 容器 ， 下 面 分 


别 设置 了 边框 样式 、 字 体 对 齐 方式 、 背 景色 、 内 边 距 、 外 边 距 的 底部 等 。 
在 下 中 浏览 效果 如 图 15-5 所 示 ， 可 以 看 到 在 页 面 顶 部 显示 了 一 个 浅 绿色 的 边框 ， 边 杠 


充满 整个 浏览 器 ， 边 框 中 间 显 示 了 一 个 “页 面 头 部 ”的 文本 信息 。 
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15-4 使 用 CSS 设置 网 页 整体 样式 15-5 使 用 CSS 定义 页 头 

4. 使 用 CSS 定义 页 面 主体 

在 页 面 主体 中 如 果 两 个 层 并 列 显示 ， 需 要 使 用 float 属性 ， 将 一 个 层 设置 到 左边 ， 一 个 层 
设置 到 右边 。 其 代码 如 下 。 


#right{ 
float:right; 
text-align:center; 
width:80%; 

border:lpx solid #ddeecc; 
margin-left:1lpx; 
height:200px; 


宣 许 粒 将 加 寸 AIQ+SSO 一 一 谐 六 钞 出 下 辑 斗 忆 习 几 9 小 日 


多 GG 


#1left{ 
float:left; 
width:19%; 
border:lpx solid #000000; 
text-align:center; 
height:200px; 
background-color:#bcbcbc; 


} 


上 面 代码 设置 了 这 两 个 层 的 宽度 ，right 层 占有 空间 的 80%，left 层 占 有 空间 的 19%， 并 
分 别 设置 了 两 个 层 的 边框 样式 、 对 齐 方式 、 背 景色 等 。 

在 下 中 浏览 效果 如 图 15-6 所 示 ， 可 以 看 到 页 面 主体 部 分 分 为 两 个 层 并 列 显示 ， 左 侧 背 
景色 为 灰色 ， 占 有 空间 较 小 ， 右 侧 背 景色 为 白色 ， 占 有 空间 较 大 。 


5. 使 用 CSS 定义 页 脚 部 分 


最 后 需要 设置 页 脚 部 分 ， 页 脚 通常 在 主体 下 面 。 因 为 页 面 主体 中 使 用 了 float 属性 设置 层 
浮动 ， 所 以 需要 在 页 脚 层 设置 clear 属性 ， 使 其 不 受 浮动 的 影响 。 其 代码 如 下 。 


#footert{ 
clear:both; /* 不 受 float 影响 */ 
text-align:center; 
height:30px; 
border:lpx solid #000000; 
background-color:#ddeecc; 


} 


上 面 代码 设置 了 页 脚 的 对 齐 方式 、 高 度 、 边 框 、 背 景色 等 。 在 正 中 浏览 效果 如 图 15-7 
所 示 ， 可 以 看 到 页 面 底部 显示 了 一 个 边框 ， 背 景色 为 浅 绿色 ， 边 框 充满 整个 DIV 布局 容器 。 


15-6 ”使 用 CSS 定义 页 面 主体 15-7 使 用 CSS 定义 页 脚 


15.2 ”固定 宽度 网 页 剖析 与 布局 
网 页 开发 过 程 中 ， 有 几 种 比较 经 典 的 网 页 布局 方式 ， 包 括 宽度 固定 的 上 中 下 版 式 、 宽 度 


固定 的 左右 版 式 、 自 适应 宽度 布局 、 浮 动 布局 等 。 这 些 版 式 会 经 常 在 网 页 设计 时 出 现 ， 并 且 
经 常 被 用 到 各 种 类 型 的 网 站 开发 中 。 | 
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网 页 设计 与 网 站 建设 
案例 课堂 ~ 


15.2.1 案例 4 一 一 网 页 单列 布局 模式 


网 页 单列 布局 模式 是 最 简单 的 布局 形式 ， 也 被 称 之 为 1-1-1 型 布局 模式 ， 其 中 “1” 表 示 
一 共 1 列 ， 连 字符 表示 竖 直 方向 上 下 排列 。 如 图 15-8 所 示 为 网 页 单列 布局 模式 示意 图 。 
本 节 将 介绍 一 个 网 页 单列 布局 模式 ， 其 效果 如 图 15-9 所 示 。 


15-8 ”网 页 单列 布局 模式 15-9 ”网 页 预览 效果 


从 图 15-9 可 以 看 到 ， 这 个 页 面 一 共 分 为 3 个 部 分 ， 第 一 个 部 分 包含 图 片 和 菜单 栏 ， 这 一 
部 分 放 到 页 头 ， 是 网 页 单列 布局 模式 的 第 一 个 “1”。 第 二 个 部 分 是 中 间 的 内 容 部 分 ， 即 页 面 
主体 ， 用 于 存放 要 显示 的 文本 信息 ， 是 网 页 单列 布局 模式 的 第 二 个 “1”。 第 三 个 部 分 是 页 面 
底部 ， 包 含 地 址 和 版 权 信息 的 页 脚 ， 是 网 页 单列 布局 模式 的 第 三 个 “1”。 


1. 创建 HTML 网页， 使 用 DIV 层 构 建 块 


首先 需要 使 用 DIV 块 对 页 面 区 域 进 行 划分 ， 使 其 符合 1-1-1 型 页 面 布局 模式 。 基 本 代码 
如 下 。 


<html> 
<head> 
<title> 上 中 下 排版 </title> 
</head> 
<body> 
<div class="big"> 
<div class="up"> 
<p><a href="#"> 首 页 </a><a href="#"> 环 保 扫描 </a><a href="#"> 环 保科 技 
</a><a href="#"> 低 碳 经 济 </a><a href="#"> 土 壤 绿 化 </a></p></div> <div 
class="middle"> 
<br /> 
<h1> 拒 绝 使 用 一 次 性 用 品 </h1> 
<p> 在 现代 社会 生活 中 ， 商 品 的 废弃 和 任意 处 理 是 普遍 的 ， 特 别 是 一 次 性 物品 使 用 激 
增 。 据 统计 ， 英 国人 每 年 抛弃 25 亿 块 尿布 ，…… 
</p> 
</div> 
<div class="down"> 
<br /> 
<p><a href="#"> 关 于 我 们 </a> | <a href="#"> 免 责 声明 </a> | <a href="#"> 
联系 我 们 </a> | <a href="#"> 生 态 中 国 </a> | <a href="#"> 联 系 我 们 </a></p> 
<p>2011 gcopy; 世界 环保 联合 会 郑州 办 事 处 技术 支持 </p> 


</div> 
</div> 
</body> 
</html> 


上 面 代码 创建 了 4 个 层 ， big 层 是 DIV 布局 容器 ， 用 来 存放 其 他 DIV 块 。up 层 表 示 页 
头 部 分 ， middle 层 表 示 页 面 主体 ， down 层 表示 页 脚 部 分 。 

在 正 中 浏览 效果 如 图 15-10 所 示 ， 可 以 看 到 页 面 显示 了 三 个 区 域 信息 ， 顶 部 显示 的 是 超 
级 链接 部 分 ， 中 间 显 示 的 是 段落 信息 ， 底 部 显示 的 是 地 址 和 版 权 信息 。 其 布局 从 上 到 下 自动 
排列 ， 不 是 期 望 的 那 种 。 


2. 使 用 CSS 定义 整体 


上 面 页 面 显示 时 ， 字 体 样式 非常 丑陋 ， 布 局 不 合理 。 此 时 需要 使 用 CSS 代码 ， 对 页 面 整 
体 样式 进行 修饰 。 其 代码 如 下 。 


<style> 
S| 
padding:0px; 
margin:0px; 
} 
body{ 
font-family:" 幼 圆 "; 
font-size:12px; 
color:green; 
} 
.big{ 
width:900px; 
margin:0 auto 0 auto; 
} 
</style> 


上 面 代码 定义 了 页 面 整体 样式 ， 例 如 字形 为 “ 幼 圆 ”， 字 体 大 小 为 12 像素 ， 字 体 颜 色 为 
绿色 ， 布 局 容器 big 的 宽度 为 900 像素 。margin:0 auto 0 auto 语句 表示 该 块 与 页 面 的 上 下 边界 
为 0， 左右 自动 调整 。 

在 正 中 浏览 效果 如 图 15-11 所 示 ， 可 以 看 到 页 面 字体 变 小 ， 字 体 颜色 为 绿色 ， 并 充满 整 
个 页 面 ， 页 面 宽度 为 900 像素 。 
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图 15-10 创建 基本 HTML 网 页 图 15-11 修饰 网 页 文字 


宣 进 栏 将 可 填 AIQ+SSO 一 一 廊 坟 秒 出 下 加 寸 吉 中 由 S+ 小 站 


罗 GG 


27@ 


网 页 设计 与 网 站 建设 
案例 课堂 9 一 


3， 使 用 CSS 定义 页 头 部 分 
下 面 就 可 以 使 用 CSS 定义 页 头 部 分 ， 即 导航 菜单 。 其 代码 如 下 。 


-up pt{ 
margin-top:80px; 
text-align:left; 
position:absolute; 
left:60px; 
top:0px; 

} 

-up ai{ 
display:inline-block; 
width:100px; 
height:20px; 
line-height:20px; 
background-color:#CCCCCC; 
color:#000000; 
text-decoration:none; 
text-align:center; 

} 

.up a:hover{ 
background-color:#FFFFFF; 
color:#FF0000; 

} 


-up{ 
width:900px; 
height:100px; 
background-image:url (15.jpg); 
background-repeat:no-repeat; 


} 
在 类 选择 器 up 中 ，CSS 定义 层 的 宽度 和 高 度 ， 其 宽度 为 900 像素 ， 并 定义 了 背景 图 片 。 
在 正 中 浏览 效果 如 图 15-12 所 示 ， 可 以 看 到 页 面 顶部 显示 了 一 个 背景 图 ， 并 且 超 级 链接 
以 绝对 定位 方式 在 页 头 显示 。 
4. 使 用 CSS 定义 页 面 主体 
下 面 需 要 使 用 CSS 定义 页 面 主体 ， 即 定义 层 和 段落 信息 。 其 代码 如 下 。 


.middle{ 
border:1lpx #ddeecc solid; 
margin-top:10px; 


} 


在 类 选择 器 middle 中 ， 定 义 了 边框 样式 和 内 边 距 距离 ， 此 处 层 的 宽度 和 big 层 的 宽度 
一 致 。 
在 正中 浏览 效果 如 图 15-13 所 示 ， 可 以 看 到 中 间 部 分 以 边框 形式 显示 。 


5. 使 用 CSS 定义 页 脚 部 分 
使 用 CSS 定义 页 脚 部 分 的 代码 如 下 。 
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-down{ 
background-color:#CCCCCC; 
height:80px; 
text-align:center; 
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图 15-12 使 用 CSS 定义 页 头 图 15-13 使 用 CSS 定义 页 面 主体 
上 面 代码 中 ， 类 选择 器 down 定义 了 背景 颜色 、 高 度 和 对 齐 方式 。 其 他 选择 器 定义 超级 链 
接 的 样式 。 
在 下 中 浏览 效果 如 图 15-14 所 示 ， 可 以 看 到 页 面 底部 显示 了 一 个 灰色 矩形 框 ， 其 版 权 信 
息 和 地 址 信息 居中 显示 。 


Ee a 
15-14 ”页 面 的 最 终 效果 
15.2.2 ”案例 5 一 一 网 页 1-2-1 型 布局 模式 
在 页 面 排版 中 ， 有 时 会 根据 内 容 需要 将 页 面 主体 分 为 左右 两 个 部 分 显示 ， 用 来 存放 不 同 
令 


宣 埋 梯 将 加 填 AIQ+SSO 一 一 莫 壕 秒 下 加 


的 信息 内 容 ， 实 际 上 这 也 是 一 种 宽度 固定 的 版 式 。 这 种 布局 模式 可 以 说 是 1-1-1 型 布局 模式 的 
演变 。 

如 图 15-15 所 示 为 网 页 1-2-1 型 布局 模式 示意 图 。 

本 节 将 介绍 一 个 网 页 1-2-1 型 布局 模式 ， 其 效果 如 图 15-16 所 示 。 


网 页 设计 与 网 站 建设 
案例 课堂 ~ 
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图 15-15 网 页 1-2-1 型 布局 模式 15-16 页面 的 最 终 效 果 
1. 创建 HTML 网 页 ， 使 用 DIV 构建 块 


在 HIML 页 面 ， 将 DIV 框架 和 所 要 显示 的 内 容 显示 出 来 ， 并 将 要 引用 的 样式 名 称 定义 
好 ， 代 码 如 下 。 


<html> 
<head> 
<title> 蔡 网 </title> 
</head> 
<body> 
<div id="container"> 
<div id="banner"> 
<img src="b.jpg" border="0"> 
</div> 
<div id="links"> 
<ul> 
<1i> 首 页 </1i> 
<1i> 茶 业 动 态 </1i> 
<1i> 名 茶 荟 莘 </1i> 
<1i> 茶 与 文化 </1i> 
<1i> 茶 艺 茶道 </1i> 
<1i> 鉴 茶 品 茶 </1i> 
<1i> 茶 与 健康 </1i> 
<1i> 茶 语 清心 </1i> 
</ul> 
<br> 
</div> 
<div id="leftbar"> 
<p class="lefttitle"> 名 人 与 茶 </p> 
<p>. 三文 鱼 茶 泡 饭 </p> 
<p>. 董 小 宛 的 茶 泡 饭 </p> 
<p> -人生 百味 一 蔓 茶 </p> 
<Pp> -我 家 的 茶 事 </p> 
<p class="lefttitle"> 茶 事 掌故 </p> 
p> .“ 峨 眉 雪 芽 ” 的 由 来 </p> 


<p>- 茶 文化 的 养生 术 </p> 
<p> . 老 北 京 的 花茶 </p> 
<p> -古代 洗 茶 的 原因 和 来 历 </p> 
</div> 
<div id="content"> 
<h4> 人 生 茶 境 </h4> 
<p> 
“ 喝 茶 当 于 瓦 纸 窗 下 ， 清 泉 绿茶 ， 用 素雅 的 陶瓷 茶具 ， 同 二 三 人 共 饮 ， 得 半日 之 闲 ， 可 抵 十 年 的 尘 梦 。” 
</p> 


<p> 
对 中 国人 来 说 ，“ 茶 ”是 一 个 温暖 的 字 。…… 
</p> 

</div> 

<div id="footer"> 版 权 所 有 2015.08.12</div> 
</div> 
</body> 
</html> 


上 面 代码 定义 了 几 个 层 ， 用 来 构建 页 面 布局 。 其 中 container 层 作为 布局 容器 ，banner 层 


作为 页 面 图 形 Logo，links 层 作 为 页 面 导航 ，leftbar 层 作为 左 侧 内 容 部 分 ，content 层 作 为 右 侧 
内 容 部 分 ，footer 层 作 为 页 脚 部 分 。 


息 


在 正 中 浏览 效果 如 图 15-17 所 示 ， 页 面 上 部 显示 了 一 张 图 片 ， 下 面 是 超级 链接 、 段 落 信 
最 后 是 地 址 信息 等 。 


2. 使 用 CSS 定义 页 面 整体 样式 
首先 需要 定义 整体 样式 ， 如 网 页 中 的 字形 或 对 齐 方 式 等 。 其 代码 如 下 。 


<style> 

= 

body, html{ 
margin:0px; padding:0px; 
text-align:center; 

#container{ 
position: relative; 
margin: 0 auto; 
padding:0px; 
width:700px; 
text-align: left; 

} 

一 -> 

</style> 


上 面 代码 中 ， 类 选择 器 container 定义 了 布局 容器 的 定位 方式 为 相对 定位 ， 宽 度 为 700 像 
文本 左 对 齐 ， 内 外 边 距 都 为 0 像素 。 
在 正 中 浏览 效果 如 图 15-18 所 示 ， 可 以 看 到 与 上 一 个 页 面 比较 ， 发 生 的 变化 不 大 。 
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图 15-17 ”添加 网 页 基本 信息 15-18 ”使 用 CSS 定义 页 面 整体 样式 
3. 使 用 CSS 定义 页 头 部 分 


此 网 页 的 页 头 包 含 两 个 部 分 : 一 是 页 面 Logo; 二 是 页 面 的 导航 菜单 。 定 义 这 两 个 层 的 
CSS 代码 如 下 。 


#banner{ 
margin:0px; padding:0px; 
#1links{ 
font-size:12px; 
margin:-18px Opx Opx Opx; 
padding:0px; 
position:relative; 


上 面 代码 中 ，ID 选择 器 banner 定义 了 内 外 边 距 都 是 0 像素 ，ID 选择 器 links 定义 了 导航 
菜单 的 样式 ， 如 字体 大 小 为 12 像素 、 定 位 方式 为 相对 定位 等 。 
在 正中 浏览 效果 如 图 15-19 所 示 ， 可 以 看 到 每 个 菜单 相隔 一 定 的 距离 显示 。 


4. 使 用 CSS 定义 页 面 主体 左 侧 部 分 
使 用 CSS 代码 定义 页 面 主体 左 侧 部 分 ， 其 代码 如 下 。 


#leftbar{ 
background-color:#d2e7ff; 
text-align:center; 
font-size:12px; 
width:150px; 
float:left; 
padding-top:0px; 
padding-bottom:30px; 
margin:0px; 


} 

上 面 代 码 中 ，ID 选择 器 leftbar 定义 了 层 背 景色 、 对 齐 方式 、 字 体 大 小 和 左 侧 DIV 层 的 宽 
度 ， 这 里 使 用 float 定义 层 在 水 平方 向 上 浮动 定位 。 

在 正 中 浏览 效果 如 图 15-20 所 示 ， 可 以 看 到 页 面 左 侧 部 分 以 矩形 框 显 示 ， 包 含 了 一 些 简 
单 的 页 面 导航 。 
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15-19 使 用 CSS 定义 页 头 部 分 图 15-20 使 用 CSS 定义 页 面 主体 左 侧 部 分 
5. 使 用 CSS 定义 页 面 主体 右 侧 部 分 
使 用 CSS 代码 定义 页 面 主体 右 侧 部 分 ， 其 代码 如 下 。 


#content{ 
font-size:12px; 
float:left; 
width:550px; 
padding:5px Opx 30px Opx; 
margin:0px; 


} 


代码 中 ID 选择 器 content 用 来 定义 字体 大 小 、 右 侧 DIV 层 宽度 、 内 外 边 距 等 。 在 IE 9.0 
中 浏览 效果 如 图 15-21 所 示 。 


6. 使 用 CSS 定义 页 脚 部 分 


如 果 上 面 的 层 使 用 了 浮动 定位 ， 页 脚 一 般 需 要 使 用 clear 去 掉 浮 动 所 带 来 的 影响 ， 其 代码 
如 下 。 


#foo0ter{ 
clear:both; 
font-size:12px; 
width:100%; 
padding:3px 0px 3px Opx; 
text-align:center; 
margin:0px; 
background-color:#b0cfff; 


footer 选择 器 中 定义 了 层 的 宽度 ， 即 充满 整个 布局 容器 ， 其 中 文字 的 大 小 为 12 像素 ， 居 
中 对 齐 显示 ， 并 为 文字 添加 了 背景 色 。 在 正 9.0 中 浏览 效果 如 图 15-22 所 示 ， 可 以 看 到 页 脚 
显示 了 一 个 矩形 框 ， 背 景色 为 浅 蓝 色 ， 和 矩形 框 内 显示 了 版 权 信息 。 
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15-21 使 用 CSS 定义 页 面 主体 右 侧 部 分 15-22 ”使 用 CSS 定义 页 脚 部 分 


15.2.3 ”案例 6 一 一 网 页 1-3-1 型 布局 模式 


掌握 1-2-1 型 布局 之 后 ，1-3-1 型 布局 就 很 容易 实现 了 。 这 里 使 用 浮动 方式 来 排列 横向 并 
排 的 3 栏 ， 在 1-2-1 型 布局 中 增加 一 列 就 可 以 了 ， 框 架 布局 如 图 15-23 所 示 。 
下 面 制作 一 个 网 页 1-3-1 型 布局 模式 ， 最 终 的 效果 如 图 15-24 所 示 。 


15-23 ”网 页 1-3-1 型 布局 模式 15-24 ”1-3-1 型 布局 页 面 最 终 效 果 


1. 创建 HTML 网 页 ， 使 用 DIV 构建 块 
在 HTML 页 面 中 将 DIV 框架 和 所 要 显示 的 内 容 显示 出 来 ， 并 将 要 引用 的 样式 名 称 定义 
好 ， 其 代码 如 下 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www- 
W3.0rg/TR/xhtml1l/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.o0rg/1999/xhtml"> 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<title>1-3-1 固定 宽度 布局 float 实例 </title> 
</head> 
<body> 
<div id="header"> 
<div class="rounded"> 
<h2> 页 头 </h2> 
<div class="main"> 


<p> 
清明 时 节 雨 纷纷 ， 路 上 行人 欲 断 瑰 <br/> 
借 问 酒家 何 处 有 ， 牧 童 遥 指 可 花村 </p> 
</div> 
<div class="footer"> 
<p></p> 
</div> 
</div> 
</div> 
<div id="container"> 
<div id="left"> 
<div class="rounded"> 
<h2> 正 文 </h2> 
<div class="main"> 
<p> 
清明 时 节 雨 纷纷 ， 路 上 行人 欲 断 瑰 <br/> 
借 问 酒家 何 处 有 ， 牧 童 遥 指 杏 花村 


</p> 


</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt; &gt; 
</p> 
</div> 
</div> 
</div> 
<div id="content"> 
<div class="rounded"> 
<h2> 正 文 1</h2> 
<div class="main"> 


| 
明 时 节 雨 纷纷 ， 路 上 行人 欲 断 魂 <br/> 
信 问 酒家 何 业 有 牧童 遥 指 可 花村 


</p> 


</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt ?7&gt; 
</p> 
</div> 
</div> 
</div> 
<div id="side"> 
<div class="rounded"> 
<h2> 正 文 2</h2> 
<div class="main"> 


<p> 

清明 时 节 雨 纷纷 ， 路 上 行人 欲 断 瑰 <br/> 
借 问 酒家 何 处 有 ， 牧 童 遥 指 杏 花村 

</p> 

</div> 

<div class="footer"> 

<p> 

查看 详细 信息 &gt; ggt; 

</p> 
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</div> 
</div> 
</div> 
</div> 
<div id="pagefooter"> 
<div class="rounded"> 
<h2> 页 脚 </h2> 
<div class="main"> 


<p> 
清明 时 节 雨 纷纷 ， 路 上 行人 欲 断 魂 


</p> 
</div> 
<div class="footer"> 
<p> 
</p> 
</div> 
</div> 
</div> 
</body> 
</html> 
\ 在 正 9.0 浏 览 器 中 预览 效果 如 图 15-25 所 示 。 
AN 
\ Er CI rel 
ee em BD cm SAT We 
\ 页 类 
ri ET 
正文 


直入 
ds 


A 


图 15-25 创建 网 页 HTML 基本 页 面 
2. 使 用 CSS 定义 页 面 整体 样式 


网 页 整体 信息 定义 完毕 后 ， 下 面 还 需要 使 用 CSS 来 定义 网 页 的 整体 样式 ， 其 具体 代码 
如 下 。 


<style type="text/css"> 
body { 
background: #FFF; 
font: 14px 宋体 ; 
margin:0; 
padding:0; 
+. 
-rounded { 
background: url (images/left-top.gif) top left no-repeat; 
width:100%; 
} 
-rounded h2 { 
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background: 

url (images/right-top.gif) 
top right no-repeat; 
padding:20px 20px 1l0px; 
margin:0; 


} 
.rounded .main { 
background: 
url (images/right .gif) 
top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 0; 
} 
.rounded .footer { 
background: 
url (images/left-bottom.gif) 
bottom left no-repeat; 
} 
.rounded .footer p { 
color:red; 
text-align:right; 
background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 
padding:10px 20px 20px; 
margin:-20px 0 0 0; 
font:0/0; 
} 
#header, #pagefooter,#container{ 
margin:0 auto; 
width:760px;} 
#1left{ 
float:left; 
width:200px; 
上 
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#content{ 
float:left; 
width:300px; 
} 

#side{ 
float:left; 
width:260px; 
} 


#pagefooter{ 
clear:both; 


</style> 


在 正 中 浏览 效果 如 图 15-26 所 示 。 
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图 15-26 使 用 CSS 定义 网 页 布局 


15.3 ”自动 缩放 网 页 1-2-1 型 布局 模式 


自动 缩放 的 网 页 布局 要 比 固定 宽度 的 网 页 布局 复杂 一 些 ， 其 根本 原因 在 于 宽度 不 确定 ， 
导致 很 多 参数 无 法 确定 ， 必 须 使 用 一 些 技巧 来 完成 。 

对 于 一 个 1-2-1 型 变 宽度 的 布局 ， 首 先 要 使 内 容 的 整体 宽度 随 浏览 器 窗口 宽度 的 变化 而 变 
化 。 因 此 ， 中 间 container 容器 中 左右 两 列 的 总 宽度 也 会 变化 。 这 样 就 会 产生 两 种 不 同 的 情 
况 : 第 一 是 这 两 列 按照 一 定 的 比例 同时 变化 ; 第 二 是 一 列 固定 ， 另 一 列 变化 。 这 两 种 情况 都 
是 很 常用 的 布局 方式 ， 下 面 先 从 等 比例 方式 讲 起 。 


15.3.1 案例 7 一 一 1-2-1 型 等 比例 变 宽 布局 


首先 实现 按 比例 的 适应 方式 ， 可 以 在 前 面 制作 的 1-2-1 型 浮动 布局 的 基础 上 完成 本 案例 。 
原来 的 1-2-1 型 浮动 布局 中 的 宽度 都 是 用 像素 数值 确定 的 固定 宽度 ， 下 面 就 来 对 它 进行 改造 ， 
使 它 能 够 自动 调整 各 个 模块 的 宽度 。 

实际 上 只 需要 修改 3 处 宽度 就 可 以 了 ， 修 改 的 样式 代码 如 下 。 


#header, #pagefooter,#container{ margin:0 auto; 
Width: 768px; /* 删 除 原来 的 固定 宽度 

width: 85%; /* 改 为 比例 宽度 */ 

#content{ float:right; 

Width:500px; /* 删 除 原来 的 固定 宽度 */ 

width: 66%; /* 改 为 比例 宽度 */ 

#side{ float:left; 

width: ”260px; /* 删 除 原来 的 固定 宽度 */ 

width:33%; /* 改 为 比例 宽度 */ 


在 正中 运行 结果 如 图 15-27 所 示 。 


图 15-27 ”1-2-1 型 等 比例 变 宽 布局 


在 这 个 页 面 中 ， 网 页 内 容 的 宽度 为 浏览 器 窗口 宽度 的 85% 页 面 中 左 侧 的 内 容 栏 的 宽度 
和 右 侧 的 内 容 栏 的 宽度 保持 1 : 2 的 比例 ， 可 以 看 到 无 论 浏览 器 窗口 宽度 如 何 变化 ， 它 们 都 等 
比例 变化 。 这 样 就 实现 了 各 个 DIV 的 宽度 都 会 等 比例 适应 浏览 器 窗口 。 
在 实际 应 用 中 还 需要 注意 以 下 两 点 。 
® 确保 不 要 使 一 列 或 多 个 列 的 宽度 太 大 ， 以 至 于 其 内 部 的 文字 行 宽 太 大 ， 造 成 阅读 
困难 。 
® ” 圆 角 框 有 最 宽 宽度 的 限制 ， 这 种 方法 制作 的 圆 角 框 如 果 超 过 一 定 宽度 就 会 出 现 裂 颖 。 


15.3.2 ”案例 8 一 一 1-2-1 型 单列 变 宽 布局 


在 实际 应 用 中 ， 单 列 宽度 变化 而 其 他 列 宽 保持 固定 的 布局 用 法 更 为 实用 。 一 般 在 存在 多 
个 列 的 页 面 中 ， 通 常 比较 宽 的 一 个 列 是 用 来 放置 内 容 的 ， 而 窗 列 放置 链接 、 导 航 等 内 容 ， 这 
些 内 容 一 般 宽度 是 固定 的 ， 不 需要 扩大 。 因 此 ， 可 以 把 内 容 列 设置 为 可 以 变化 ， 而 其 他 列 固 定 。 

比如 在 图 12-27 中 ， 右 侧 的 Side 的 宽度 固定 ， 当 总 宽度 变化 时 ，Content 部 分 就 会 自动 变 
化 。 如 果 仍 然 使 用 简单 的 浮动 布局 是 无 法 实现 这 个 效果 的 ， 如 果 把 某 一 列 的 宽度 设置 为 固定 
值 ， 那 么 另 一 列 ( 即 活动 列 ) 的 宽度 就 无 法 设置 了 ， 因 为 总 宽度 未 知 ， 活 动 列 的 宽度 也 无 法 确 
定 ， 那 么 怎么 解决 呢 ? 主 要 问题 就 是 浮动 列 的 宽度 应 该 等 于 “100%-300px”， 而 CSS 显然 不 
支持 这 种 带 有 加 减法 运算 的 宽度 表达 方法 ， 但 是 通过 margin 可 以 变通 地 实现 这 样 的 宽度 。 

具体 的 解决 方法 为 :在 content 的 外 面 再 套 一 个 DIV， 使 它 的 宽度 为 100%， 也 就 是 等 于 
container 的 宽度 ， 然 后 通过 将 左 侧 的 margin 设置 为 负 的 300 像素 ， 就 使 它 向 左 平移 了 300 像 
素 ， 再 将 content 的 左 侧 margin 设置 为 正 的 300 像素 ， 就 实现 了 “100%-300px” 这 个 本 来 无 
法 表达 的 宽度 。 具 体 的 CSS 代码 如 下 。 

#header, #pagefooter, #container{ 

margin:0 auto; 

width:85%; 

min-width:500px; 

max-width:800px; 

a 

margin-left:-260px; 

float:lefts 
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width:100%; 

3 

#content{ 
margin-left:260px; 
#side{ 
float:right; 
width:260px; 

} 

#pagefooter{ 
clear:both; 


} 
在 正 浏 览 中 运行 程序 ， 即 可 得 到 如 图 15-28 所 示 的 结果 。 


15-28 ”1-2-1 型 单列 变 宽 布局 


15.4 自动 缩放 网 页 1-3-1 型 布局 模式 


1-3-1 型 布局 可 以 产生 很 多 不 同 的 变化 方式 ， 如 : 

e 三 列 都 按 比 例 来 适应 宽度 ; 

e ”一 列 固定 ， 其 他 两 列 按 比 例 适应 宽度 ; 

® ”两 列 固定 ， 其 他 一 列 适应 宽度 。 

对 于 后 两 种 情况 ， 又 可 以 根据 特殊 的 一 列 与 另外 两 列 的 不 同位 置 ， 产 生出 多 种 变化 。 下 
面 分 别 进 行 介绍 。 


15.4.1 案例 9 一 一 1-3-1 型 三 列 宽度 等 比例 布局 


对 于 1-3-1 型 布局 的 第 一 种 情况 ， 即 三 列 按 固定 比例 伸缩 适应 总 宽度 ， 和 前 面 介绍 的 1-2-1 
型 布局 完全 一 样 ， 只 要 分 配 好 每 一 列 的 百分比 就 可 以 了 ， 这 里 不 再 袭 述 。 


15.4.2 ”案例 10 一 一 1-3-1 型 单 侧 列 宽度 固定 的 变 宽 布局 


对 于 一 列 固定 、 其 他 两 列 按 比 例 适应 宽度 的 情况 ， 如 果 这 个 固定 的 列 在 左边 或 右边 ， 那 
么 只 需要 在 两 个 变 宽 列 的 外 面 套 一 个 DIV， 并 且 这 个 DIV 的 宽度 是 变 宽 的 ， 它 与 旁边 的 固定 
宽度 列 构成 了 一 个 单列 固定 的 1-2-1 型 布局 ， 就 可 以 使 用 “绝对 定位 ”法 或 者 “改进 浮动 ”法 
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进行 布局 ， 然 后 再 将 变 宽 列 中 的 两 个 变 宽 列 按 比 例 并 排 ， 就 很 容易 实现 了 。 

下 面 使 用 浮动 方法 进行 制作 。 解 决 的 方法 同 1-2-1 型 单列 固定 一 样 ， 这 里 把 活动 的 两 个 列 
看 成 一 个 ， 在 容器 里 面 再 套 一 个 DIV， 即 由 原来 的 一 个 wrap 变 为 两 层 ， 分 别 叫 作 outerWrap 
和 innerWrap。 这 样 ，outerWrap 就 相当 于 上 面 1-2-1 型 布局 中 的 wrap 容器 。 新 增加 的 
innerWrap 是 以 标准 流 方式 存在 的 ， 宽 度 会 自然 伸展 ， 由 于 设置 200 像素 的 左 侧 margin， 因 
此 它 的 宽度 就 是 总 宽度 减 去 200 像素 了 。innerWrap 里 面 的 navi 和 content 就 会 都 以 这 个 新 宽 
具体 的 代码 如 下 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
W3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>1-3-1 1 固定 宽度 布局 Eloat 实例 </title> 

<style type="text/css"> 

body { 

background: #FFF; 

font: 14px 宋体 ; 

margin:0; 

padding:0; 

} 
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.rounded { 
background: url (images/left-top.gif) top left no-repeat; 
width:100%; 
} 
.rounded h2 { 
background: 
url (images/right-top.gif) 
top right no-repeat; 
padding:20px 20px 1l10px; 
margin:0; 


} 
.rounded .main { 
background: 
url (images/right .gif) 
top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 0; 
} 
.rounded .footer { 
background: 
url (images/left-bottom.gif) 
bottom left no-repeat; 
} 
"rounded sfooter p 
color:red; 
text-align:right; 
background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 
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padding:10px 20px 20px; 
margin:-20px 0 0 0; 
font:0/0; 
} 
#header, #pagefooter,#container{ 
margin:0 auto; 
width:85%; 
} 


#outerWrap{ 
float:left; 
width:100%; 
margin-left:-200px; 
} 


#innerWrap{ 
margin-left:200px; 
} 


#1left{ 
所 float:left; 
SN width:40%; 
\ } 


#content{ 
float:right; 
width:59.5%; 
} 


#content img{ 
float:right; 
} 


#side{ 
float:right; 
width:200px; 
} 


#pagefooter{ 
clear:both; 
</style> 
</head> 
<body> 
<div id="header"> 
<div class="rounded"> 
<h2> 页 头 </h2> 
<div class="main"> 
<p> 
床 前 明月 光 ， 疑 是 地 上 霜 </p> 
</div> 
<div class="footer"> 


<p></p> 
</div> 
</div> 
</div> 
<div id="container"> 
<div id="outerWrap"> 
<div id="innerWrap"> 
<div id="left"> 
<div class="rounded"> 
<h2> 正 文 </h2> 
<div class="main"> 
<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 <br/> 
床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 


</div> 
<div class="footer"> 
<p> 
查看 详细 信息 &gt; &gt; 
</p> 
</div> 
</div> 
</div> 
<div id="content"> 
<div class="rounded"> 
<h2> 正 文 1</h2> 
<div class="main"> 
<p> 


床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 


</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt; ggt; 
</p> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div id="side"> 
<div class="rounded"> 
<h2> 正 文 2</h2> 
<div class="main"> 
<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 <br/> 
床 前 明月 光 ， 疑 是 地 上 霜 </p> 
</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt; &gt; 
</p> 
</div> 

</div> 
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</div> 
</div> 


<div id="pagefooter"> 
<div class="rounded"> 
<h2> 页 脚 </h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 霜 
</p> 
</div> 
<div class="footer"> 
<p> 
</p> 
</div> 

</div> 

</div> 

</body> 

</html> 


在 正 浏 览 器 中 运行 结果 如 图 15-29 所 示 。 


15-29 ”1-3-1 型 单 侧 列 宽度 固定 的 变 宽 布局 
15.4.3 ”案例 11 一 一 1-3-1 型 中 间 列 宽度 固定 的 变 宽 布局 


这 种 布局 的 形式 是 固定 列 被 放 在 中 间 ， 它 的 左右 各 有 一 列 ， 并 按 比例 适应 总 宽度 。 这 是 
一 种 很 少见 的 布局 形式 (最 常见 的 是 两 侧 的 列 固定 宽度 ， 中 间 列 变化 宽度 )， 如 果 已 经 充分 理解 
了 前 面 介 绍 的 改进 浮动 法 制作 单列 宽度 固定 的 1-2-1 型 布局 ， 就 可 以 把 “ 负 margin” 的 思路 继 
续 深化 ， 实 现 这 种 不 多 见 的 布局 ， 代 码 如 下 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
Ww3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>1-3-1 1 中 间 固 定 宽度 布局 float 实例 </title> 

<style type="text/css"> 

body { 

background: #FFF; 


font: 14px 宋体 ; 
margin:07 
padding:0; 


.rounded { 
background: url (images/left-top.gif) top left no-repeat; 
width:100%; 
} 
.rounded h2 { 
background: 
url (images/right-top.gif) 
top right no-repeat; 
padding:20px 20px 1l0px; 
margin:0; 


加 者 副 沼 可 


} 
.rounded .main { 
background: 
url (images/right .gif) 
top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 0; 
} 
.rounded .footer { 
background: 
url (images/left-bottom.gif) 
bottom left no-repeat; 
} 
.rounded .footer P { 
color:red; 
text-align:right; 
background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 
padding:10px 20px 20px; 
margin:-20px 0 0 0; 
font:0/0; 
} 
#header, #pagefooter, #container{ 
margin:0 auto; 
width:85%; 
} 


宣 进 性 将 加 卦 AIQ+SSO 一 一 莫 壕 秘 


#naviWrapt{ 
width:50%; 
float:left; 
margin-left:-150px; 
下 


#1left{ 
margin-left:150px; 
’ 
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#content{ 
float:left; 
width:300px; 
} 


#content img{ 
float:right; 
是 


#sideWrap{ 
width:49.9%; 

float:right; 

margin-right:-150px; 


} 
#side{ 


margin-right:150px; 
} 


#pagefooter{ 
clear:both; 


SR } 


</style> 
</head> 
<body> 
<div id="header"> 
<div class="rounded"> 
<h2> 页 头 </h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 
</div> 
<div class="footer"> 
<p></p> 
</div> 
</div> 
</div> 
<div id="container"> 
<div id="naviWrap"> 
<div id="Left”> 
<div class="rounded"> 
<h2> 正 文 </h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 霜 </p> 


</div> 

<div class="footer"> 
<p> 

查看 详细 信息 &gt; ggt; 
</p> 

</div> 


</div> 
</div> 
</div> 
<div id="content"> 
<div class="rounded"> 
<h2> 正 文 1</h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 


</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt 7?&gt; 
</p> 
</div> 
</div> 
</div> 
<div id="sideWrap"> 
<div id="side"> 
<div class="rounded"> 
<h2> 正 文 2</h2> 
<div class="main"> 


<p> 

床 前 明月 光 ， 疑 是 地 上 和 霜 
</p> 

</div> 

<div class="footer"> 


<p> 
查看 详细 信息 &gt ?7&gt; 
</D> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div id="pagefooter"> 
<div class="rounded"> 
<h2> 页 脚 </h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 霜 


</p> 
</div> 
<div class="footer"> 
<p> 
</p> 
</div> 
</div> 

</div> 

</body> 

</html> 


在 代码 中 ， 页 面 中 间 列 的 宽度 是 300 像素 ， 两 边 列 等 宽 (不 等 宽 的 道理 是 一 样 的 )， 即 总 宽 
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度 减 去 300 像素 后 剩余 宽度 的 50%， 制 作 的 关键 是 如 何 实现 “(100%-300px)/2” 的 宽度 。 现 
在 需要 在 left 和 side 两 个 DIV 外 面 分 别 套 一 层 DIV， 把 它们 “ 包 庄 ” 起 来 ， 依 靠 嵌 套 的 两 个 
DIV， 实 现 相对 宽度 和 绝对 宽度 的 结合 。 在 正 浏览 器 中 运行 结果 如 图 15-30 所 示 。 


15-30 1-3-1 型 中 间 列 宽度 固定 的 变 宽 布局 
15.4.4 ”案例 12 一 一 1-3-1 型 双 侧 列 宽度 固定 的 变 宽 布局 


三 列 中 的 左右 两 列 宽度 固定 ， 中 间 列 宽度 自 适 应 变 宽 布局 的 实际 应 用 很 广泛 ， 下 面 还 是 
通过 浮动 定位 进行 了 解 。 关 键 思 想 就 是 把 三 列 的 布局 看 作 是 嵌 套 的 两 列 布 局 ， 利 用 margin 的 
负 值 来 实现 三 列 浮动 。 

具体 的 代码 如 下 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
WwW3 .org/TR/xhtml1/DTD/V/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtm1"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>1-3-1 1 两 侧 固定 宽度 中 间 变 宽 布局 float 实例 </title> 

<style type="text/css"> 

body { 

background: #FFF; 

font: 14px 宋体 ; 

margin:07 

padding:0; 

} 


.rounded { 
background: url (images/left-top.gif) top left no-repeat; 
width:100%; 
} 
.rounded h2 { 
background: 
url (images/right-top.gif) 
top right no-repeat; 
padding:20px 20px 10px; 
margin:0; 


全 a 


-rounded -main { 
background: 
url (images/right .gif) 
top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 07 
3 

.rounded .footer { 

background: 

url (images/left-bottom.gif) 
bottom left no-repeat; 
} 

-rounded .footer pi{ 
color:red; 
text-align:right; 
background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 
padding:10px 20px 20px; 
margin:-20px 0 0 0; 
font:0/0; 

1 

#header, #pagefooter,#container{ 

margin:0 auto; 
width:85%; 

} 

#side{ 
width:200px; 
float:right; 
} 

#outerWrap{ 
width:100%; 
float:left; 
margin-left:-200px; 
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#innerWrap{ 
margin-left:200px; 


#1left{ 
width:150px; 
float:left; 

} 

#contentWrap{ 
width:100%; 
float:right; 


margin-right:-150px; 
. 
#content{ 
margin-right:150px; 

上 


#content img{ 
float:right; 
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} 
#pagefooter{ 
clear:both; 
} 
</style> 
</head> 
<body> 
<div id="header"> 
<div class="rounded"> 
<h2> 页 头 </h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 
</div> 
<div class: 
<p></p> 
NN </div> 
</div> 

</div> 
<div id="container"> 
<div id="outerWrap"> 
innerWrap"> 
人 

<div class="rounded"> 

<h2> 正 文 </h2> 

| <div class="main"> 


<p> 床 前 明月 光 ， 疑 是 地 上 箱 </p> 


footer"> 


</div> 
<div class="footer"> 
<p> 
查看 详细 信息 &gt; &gt; 
</p> 
</div> 
</div> 
</div> 
<div id="contentWrap"> 
<div id="content"> 
<div class="rounded"> 
<h2> 正 文 1</h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 


</div> 
<div class="footer"> 
<p> 
查看 详细 信息 &gt ?&gt; 
</p> 
</div> 
</div> 
</div> 
</div><!-- end of contetnwrap-——> 
</div><!-- end of inwrap-——> 


</div><!-- end of outwrap--> 
<div id="side"> 
<div class="rounded"> 
<h2> 正 文 2</h2> 
<div class="main"> 


<p> 床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 


<div id="pagefooter"> 
<div class="rounded"> 
<h2> 页 脚 </h2> 
<div class="main"> 


i 局 
</div> 

<div class="footer"> 
<p> 全 
查看 详细 信息 &gt; &gt; 档 
</p> u 
</div> L 
</div> 9 
</div> 的 
</div> & 
布 
局 
典 
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<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 
</p> 
</div> 
<div class="footer"> 
<p> 
</p> 
</div> 

</div> 

</div> 

</body> 

</html> 


在 代码 中 ， 先 把 左边 和 中 间 两 列 看 作 一 组 活动 列 ， 而 右边 的 一 列 作为 固定 列 ， 使 用 前 面 
的 改进 浮动 法 就 可 以 实现 。 然 后 ， 再 把 两 列 各 自 当 作 独 立 的 列 ， 左 侧 列 为 固定 列 ， 再 次 使 用 
改进 浮动 法 ， 就 可 以 最 终 完成 整个 布局 。 在 正 浏览 器 中 运行 结果 如 图 15-31 所 示 。 
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图 15-31 1-3-1 型 双 侧 列 宽度 固定 的 变 宽 布局 
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15.4.5 “案例 13 一 一 1-3-1 型 中 列 和 侧 列 宽度 固定 的 变 宽 布局 


这 种 布局 的 中 间 列 和 它 一 侧 的 列 是 固定 宽度 ， 另 一 侧 列 宽度 自 适 应 。 很 显然 这 种 布局 就 
很 简单 了 ， 同 样 使 用 改进 浮动 法 来 实现 。 由 于 两 个 固定 宽度 列 是 相 邻 的 ， 因 此 就 不 用 使 用 两 
次 改进 浮动 法 了 ， 只 需要 一 次 就 可 以 做 到 。 具 体 代码 如 下 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
Ww3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/zxhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>1-3-1 中 列 和 左 侧 列 宽度 固定 的 变 宽 布 局 Eloat 实例 </title> 

<style type="text/css"> 

body { 

background: #FFF; 

font: 14px 宋体 ; 

margin:0; 

padding:0; 

} 


.rounded { 
background: url (images/left-top.gif) top left no-repeat; 
width:100%; 
} 
.rounded h2 { 
background: 
url (images/right-top.gif) 
top right no-repeat; 
padding:20px 20px 1l10px; 
margin:0; 


} 
.rounded .main { 
background: 
url (images/right .gif) 
top right repeat-y; 
padding:10px 20px; 
margin:-20px 0 0 0; 
} 

.rounded .footer { 

background: 

url (images/left-bottom.gif) 
bottom left no-repeat; 
} 

.rounded .footer pi{ 
color:red; 
text-align:right; 
background:url (images/right-bottom.gif) bottom right no-repeat; 
display:block; 
padding:10px 20px 20px; 
margin:-20px 0 0 0; 
font:0/0; 


} 
#header, #pagefooter, #container{ 
margin:0 auto; 
width:85%; 
} 


#1left{ 
float:left; 
width:150px; 
} 


#content{ 
float:left; 
width:250px; 
} 


#content img{ 
float:right; 
} 


#sideWrap{ 
float:right; 
width:100%; 
margin-right:-400px; 
} 


#side{ 
margin-right:400px; 
} 


#pagefooter{ 
clear:both; 
} 
</style> 
</head> 
<body> 
<div id="header"> 
<div class="rounded"> 
<h2> 页 头 </h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 霜 </p> 
</div> 
<div class="footer"> 
<p></p> 
</div> 
</div> 
</div> 
<div id="container"> 
<div id="left"> 
<div class="rounded"> 
<h2> 正 文 </h2> 
<div class="main"> 
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<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 


</div> 
<div class="footer"> 
<p> 
查看 详细 信息 &gt; &gt; 
</p> 
</div> 
</div> 
</div> 
<div id="content"> 
<div class="rounded"> 
<h2> 正 文 1</h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 </p> 


</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt 7?&gt; 
</p> 
</div> 
</div> 
</div> 
<div id="sideWrap"> 
<div id="side"> 
<div class="rounded"> 
<h2> 正 文 2</h2> 
<div class="main"> 
<p> 
远 床 前 明月 光 ， 疑 是 地 上 箱 </p> 
</div> 
<div class="footer"> 


<p> 
查看 详细 信息 &gt; ggt; 
</p> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div id="pagefooter"> 
<div class="rounded"> 
<h2> 页 脚 </h2> 
<div class="main"> 


<p> 
床 前 明月 光 ， 疑 是 地 上 和 霜 
</p> 

</div> 

<div class="footer"> 
<p> 

</p> 


</div> 
</div> 

</div> 

</body> 

</html> 

在 代码 中 把 左 侧 的 left 和 content 列 的 宽度 分 别 固 定 为 150 像素 和 250 像素 ， 右 侧 的 side 
列 宽度 变化 。 那 么 side 列 的 宽度 就 等 于 “100%-150px-250px”。 因 此 根据 改进 浮动 法 ， 在 
side 列 的 外 面 再 套 一 个 sideWrap 列 ， 使 sideWrap 的 宽度 为 00%， 并 通过 设置 负 的 margin， 
使 它 向 右 平移 400 像素 。 然 后 再 对 side 列 设置 正 的 margin， 限 制 右 边界 ， 这 样 就 可 以 实现 希 
望 的 效果 了 。 

在 正 浏 览 器 中 运行 结果 如 图 15-32 所 示 。 
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15.5 ”实战 演练 一 一 使 用 CSS 设 定 网 页 布局 列 的 背景 色 


在 实际 工作 的 过 程 中 ， 很 多 页 面 布局 当中 ， 对 各 列 的 背景 色 都 是 有 要 求 的， 如 希望 每 一 
列 都 有 自己 的 颜色 ， 下 面 以 一 个 实例 为 例 ， 介 绍 如 何 使 用 CSS 设 定 网 页 布局 列 的 背景 色 。 
这 里 以 固定 宽度 1-3-1 型 布局 为 框架 ， 直 接 修改 其 CSS 样式 表 ， 具 体 代码 如 下 。 


body{ 

font:14px 宋体 ; 
margin:0; 

. 

#header, #pagefooter { 
background:#CFO; 
width:760px; 
margin:0 auto; 

} 

h2{ 

margin:0; 
padding:20px; 

} 
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padding:20px; 
text-indent:2em; 
margin:0; 

} 

#container { 
position: relative; 
width:760px; 
margin:0 auto; 
background:url (images/16-7.gif); 
， 

#1left { 

width: 200px; 
position: absolute; 
left: Opx; 

top: Opx; 

¥ 

#content { 

right: Opx; 

top: Opx; 
margin-right: 200px; 
margin-left: 200px; 
} 

#side { 

width: 200px; 
position: absolute; 
right: Opx; 

top: Opx; 

) 


在 代码 中 ，left、content、side 没有 使 用 背景 色 ， 是 因为 各 列 的 背景 色 只 能 覆盖 到 其 内 容 
的 下 端 ， 而 不 能 使 每 一 列 的 背景 色 都 一 直 扩 展 到 最 下 端 。 每 个 DIV 只 负责 自己 的 高 度 ， 根 本 
不 管 它 旁 边 的 列 有 多 高 ， 要 使 并 列 的 各 列 的 高 度 相 同 是 很 困难 的 。 通 过 给 container 设 定 一 个 
宽度 为 760px 的 背景 ， 这 个 背景 图 按 样式 中 的 left、content、side 宽度 进行 颜色 制作 ， 变 相 实 
现 给 三 列 加 背景 的 功能 。 运 行 结果 如 图 15-33 所 示 。 


15-33” 设 定 网 页 布局 列 的 背景 色 


15.6” 跟 我 练 练 手 


15.6.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
15.6.2 上 机 练习 


练习 1: 使 用 CSS 排版 。 

练习 2: 进行 固定 宽度 网 页 剖析 与 布局 。 
练习 3: 自动 缩放 网 页 1-2-1 型 布局 模式 。 
练习 4: 自动 缩放 网 页 1-3-1 型 布局 模式 。 


15.7 高 手 甜 点 


甜点 1: 下 浏览 器 和 Firefox 浏览 器 显示 float 浮动 布局 时 为 什么 会 出 现 不 同 的 效果 

两 个 相连 的 DIV 块 ， 如 果 一 个 设置 为 左 浮动 ， 一 个 设置 为 右 浮动 ， 这 时 在 Firefox 浏览 器 
中 就 会 出 现 设置 失效 的 问题 。 其 原因 是 正 浏览 器 会 根据 设置 来 判断 float 浮动 ， 而 在 Firefox 
中 ， 如 果 上 一 个 float 没有 被 清除 的 话 ， 下 一 个 float 会 自动 沿用 上 一 个 float 的 设置 ， 而 不 使 
用 自己 的 float 设置 。 

这 个 问题 的 解决 办 法 就 是 ， 在 每 一 个 DIV 块 设置 float 后 ， 在 最 后 加 入 一 句 清 除 浮动 的 代 
码 clear:both， 这 样 就 会 清除 前 一 个 浮动 的 设置 了 ， 下 一 个 float 也 就 不 会 再 使 用 上 一 个 浮动 设 
置 ， 从 而 使 用 自己 所 设置 的 浮动 了 。 

甜点 2: 要 不 要 设置 DIV 层 的 高 度 

在 下 浏览 器 中 ， 如 果 设置 了 高 度 值 ， 但 是 内 容 很 多 ， 会 超出 所 设置 的 高 度 ， 这 时 浏览 器 
就 会 自己 撑 开 高 度 ， 以 达到 显示 全 部 内 容 的 效果 ， 不 受 所 设置 的 高 度 值 限制 。 而 在 Firefox 浏 
览 器 中 ， 如 果 固 定 了 高 度 的 值 ， 那 么 容器 的 高 度 就 会 被 固定 住 ， 就 算 内 容 过 多 ， 它 也 不 会 撑 
开 ， 也 会 显示 全 部 内 容 。 但 是 如 果 容 器 下 面 还 有 内 容 的 话 ， 那 么 这 一 块 就 会 与 下 一 块 内 容 
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这 个 问题 的 解决 办 法 就 是 ， 不 要 设置 高 度 的 值 ， 这 样 浏览 器 就 会 根据 内 容 自动 判断 高 
度 ， 也 不 会 出 现 内 容重 合 的 问题 。 


宣 详 习 效 加 卦 AIQ+SSO 一 一 训 壕 秒 则 否 加 斗 避 导 。 才 9 中 


a7 


第 16 章 


第 17 章 
第 18 章 
第 19 章 


4 全 
第 5 篇 
网 页 脚本 篇 


读 懂 JavaScript 代码 的 前 提 一 一 JavaScript 
脚本 基础 

改变 程序 执行 方向 一 一 程序 控制 结构 与 语句 
JavaScript 代码 中 的 密码 一 一 函数 
JavaScript 的 核心 内 容 一 一 内 置 对 象 


JavaScript 


读 懂 JavaScript 
代码 的 前 提 一 一 


常量 和 变量 、 运 算 


言 ， 还 是 脚本 语言 ， 都 具有 数据 类 型 、 
符 、 表 达 式 、 注 释 语句 、 流 程控 制 语句 等 基本 元 素 ， 这 些 基 本 元 素 构成 了 编程 基 


无 论 是 传统 编程 语 
础 。 本 章 将 主要 讲述 JavaSc 


“> 
NE 


区 
从 


2 
5 
0 
2 


I 


S 
> 


> 


| 
\ \ 


ript 编程 的 基本 知识 。 


3 
人 


2 
3 


3 


© 


yp 


》 


全 2 


网 页 设计 与 网 站 建设 
案例 课堂 四 一 


16.1 认识 JavaScript 


JavaScript 作为 一 种 可 以 给 网 页 增加 交互 性 的 脚本 语言 ， 拥 有 近 20 年 的 发 展 历史 。 它 的 
简单 、 易 学 易 用 特性 ， 使 其 立 于 不 败 之 地 。 


16.1.1 什么 是 JavaScript 


JavaScript 最 初 由 网 景 公司 的 Brendan Eich 设计 ， 是 一 种 动态 、 弱 类 型 、 基 于 原型 的 语 
言 ， 内 置 支持 类 。 经 过 近 20 年 的 发 展 ， 它 已 经 成 为 健壮 的 基于 对 象 和 事件 驱动 并 具有 相对 安 
全 性 的 客户 端 脚 本 语言 。 同 时 也 是 一 种 广泛 用 于 客户 端 Web 开发 的 脚本 语言 ， 常 用 来 给 
HTML 网 页 添加 动态 功能 ， 比 如 响应 用 户 的 各 种 操作 。 

JavaScript 可 以 弥补 HTML 语言 的 缺陷 ， 实 现 Web 页 面 客户 端 动态 效 果 ， 其 主要 作用 
如 下 。 

(1) 动态 改变 网 页 内 容 。 

HTML 语言 是 静态 的 ， 一 旦 编写 ， 内 容 是 无 法 改变 的 。JavaScript 可 以 弥补 这 种 不 足 ， 可 
以 将 内 容 动态 地 显示 在 网 页 中 。 

(2) 动态 改变 网 页 的 外 观 。 

JavaScript 通过 修改 网 页 元 素 的 CSS 样式 ， 可 以 动态 地 改变 网 页 的 外 观 。 例 如 ， 修 改 文 本 
的 颜色 、 大 小 等 属性 ， 动 态 改变 图 片 的 位 置 等 。 

(3) 验证 表单 数据 。 

为 了 提高 网 页 的 效率 ， 用 户 在 填写 表单 时 ， 可 以 在 客户 端 对 数据 进行 合法 性 验证 ， 验 证 
成 功 之 后 才能 提交 到 服务 器 上 ， 进 而 减少 服务 器 的 负担 和 网 络 带宽 的 压力 。 

(4) 响应 事件 。 

JavaScript 是 基于 事件 的 语言 ， 因 此 可 以 影响 用 户 或 浏览 器 产生 的 事件 。 只 有 事件 产生 时 
才 会 执行 某 段 JavaScript 代码 ， 如 用 户 在 单 击 计 算 按钮 时 ， 程 序 才 显示 运行 结果 。 


em 几乎 所 有 浏览 器 都 支持 JavaScript， 如 Internet Explorer(IE)、Firefox、Netscape、 
皂 ”Mozilla、Opera 等 。 


16.1.2 JavaScript 的 特点 


JavaScript 的 主要 特点 有 以 下 几 个 方面 。 

(1) 语法 简单 ， 易 学 易 用 。 

JavaScript 语法 简单 、 结 构 松 散 ， 可 以 使 用 任何 一 种 文本 编辑 器 来 进行 编写 。JavaScript 
程序 运行 时 不 需要 编辑 译 成 二 进 制 代码 ， 只 需要 支持 JavaScript 的 浏览 器 进行 解释 。 

(2) 解释 性 语言 。 

非 脚 本 语言 编写 的 程序 通常 需要 经 过 编写 、 编 译 、 链 接 、 运 行 4 个 步 又， 而 脚本 语言 
JavaScript 只 需要 经 过 编写 、 运 行 2 个 步 又 。 


(3) 跨 平台 。 

由 于 JavaScript 程序 的 运行 依赖 于 浏览 器 ， 只 要 操作 系统 中 安装 有 支持 JavaScript 的 浏览 
器 即 可 ， 因 此 JavaScript 与 平台 (操作 系统 ) 无 关 ， 在 Windows 操作 系统 、UNIX 操作 系统 、 
Linux 操作 系统 ， 以 及 用 于 手机 的 Android 操作 系统 、iPhone 操作 系统 等 上 都 能 运行 。 

(4) 基于 对 象 和 事件 驱动 。 

JavaScript 把 HTML 页 面 中 的 每 个 元 素 都 当 作 一 个 对 象 来 处 理 ， 并 且 这 些 对 象 都 具有 层次 
关系 ， 像 一 棵 倒立 的 树 ， 这 种 关系 被 称 为 “文档 对 象 模型 DOM)”。 在 编写 JavaScript 代码 时 
会 接触 到 大 量 对 象 及 对 象 的 方法 和 属性 。 可 以 说 学 习 JavaScript 的 过 程 ， 就 是 了 解 JavaScript 
对 象 及 其 方法 和 属性 的 过 程 。 因 为 基于 事件 驱动 ， 所 以 JavaScript 可 以 捕捉 到 用 户 在 浏览 器 中 
的 操作 ， 可 以 将 原来 静态 的 HTML 页 面 变 成 可 以 和 用 户 交 互 的 动态 页 面 。 

(5) 用 于 客户 端 。 

尽管 JavaScript 分 为 服务 器 端 和 客户 端 两 种 ， 但 目前 应 用 最 多 的 还 是 客户 端 。 


16.1.3 ”JavaScript 与 Java 的 区 别 


JavaScript 是 一 种 嵌入 式 脚本 文件 ， 直 接 插 入 网 页 ， 由 浏览 器 一 边 解 释 一 边 执行 。Java 语 
言 不 一 样 ， 它 必须 在 Java 虚拟 机 上 和 运行， 而 且 事先 需要 进行 编译 。 另 外 ，Java 的 语法 规则 比 
JavaScript 要 严格 得 多 ， 功 能 要 强大 得 多 。 本 节 就 来 分 析 JavaScript 与 Java 的 主要 区 别 。 


1. 基于 对 象 和 面向 对 象 

JavaScript 是 基于 对 象 的 ， 它 是 一 种 脚本 语言 ， 是 一 种 基于 对 象 和 事件 驱动 的 编程 语言 ， 
因而 它 本 身 提 供 了 非常 丰富 的 内 部 对 象 供 设计 人 员 使 用 。 

Java 是 面向 对 象 的 ， 即 Java 是 一 种 真正 的 面向 对 象 的 语言 ， 即 使 是 开发 简单 的 程序 也 必 
须 设 计 对 象 。 

2. 强 变量 和 弱 变 量 


JavaScript 与 Java 所 采取 的 变量 是 不 一 样 的 。 
Java 采用 强 类 型 变量 检查 ， 即 所 有 变量 在 编译 之 前 必须 作 声 明 ， 如 下 面 一 段 代 码 。 


Integer E 

string Y 

X=1234567 

y=654321; 

其 中 “x=123456” 是 一 个 整数 ，“y=654321” 是 一 个 字符 串 。 

而 在 JavaScript 中 ， 变 量 声明 采用 弱 类 型 ， 即 变量 在 使 用 前 不 需要 做 声明 ， 而 是 解释 器 在 
运行 时 检查 其 数据 类 型 ， 如 下 面 一 段 代码 。 

X=1234567 

y="65A321"> 


在 上 述 代码 中 ， 第 一 行 说 明 x 为 数据 型 变量 ， 而 第 二 行 说 明 y 为 字符 型 变量 。 
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3. 代码 格式 不 同 

JavaScript 与 Java 的 代码 格式 不 一 样 。JavaScript 的 代码 是 一 种 文本 字符 格式 ， 可 以 直接 
坎 入 HTML 文档 中 ， 并 且 可 动态 装载 ， 编 写 HTML 文档 就 像 编辑 文本 文件 一 样 方便 ， 其 独立 
文件 的 格式 为 *js。 

Java 是 一 种 与 HTML 无 关 的 格式 ， 必 须 通过 向 HTML 中 引用 外 媒体 来 进行 装载 ， 其 代码 
以 字 节 代码 的 形式 保存 在 独立 的 文档 中 ， 其 独立 文件 的 格式 为 *.class。 

4. 嵌入 方式 不 同 


JavaScript 与 Java 的 代入 方式 不 一 样 。 在 HTML 文档 中 ， 两 种 编程 语言 的 标识 不 同 ， 
JavaScript 使 用 <Script>.… </Script> 来 标识 ， 而 Java 使 用 <applet>...</applet> 来 标识 。 

5. 静态 联 编 和 动态 联 编 

JavaScript 采用 动态 联 编 ， 即 JavaScript 的 对 象 引 用 在 运行 时 进行 检查 。 

Java 采用 静态 联 编 ， 即 Java 的 对 象 引 用 必须 在 编译 时 进行 ， 以 使 编译 器 能 够 实现 强 类 型 
检查 。 

6. 浏览 器 执行 方式 不 同 

JavaScript 与 Java 在 浏览 器 中 所 执行 的 方式 不 一 样 。JavaScript 是 一 种 解释 性 编程 语言 ， 
其 源 代 码 在 发 往 客户 端 执行 之 前 不 需要 经 过 编译 ， 而 是 将 文本 格式 的 字符 代码 发 送 给 客户 ， 
即 JavaScript 语句 本 身 随 Web 页 面 一 起 下 载 下 来 ， 由 浏览 器 解释 执行 。 

而 Java 的 源 代码 在 传递 到 客户 端 执 行 之 前 ， 必 须 经 过 编译 ， 因 而 客户 端 上 必须 具有 相应 
平台 上 的 仿真 器 或 解释 器 ， 它 可 以 通过 编译 器 或 解释 器 实现 独立 于 某 个 特定 的 平台 编译 代码 。 


16.1.4 JavaScript 版 本 


1995 年 Netscape 公司 开发 出 LiveScript 语言 ， 与 Sun 公司 合作 之 后 ， 并 于 1996 年 更 名 为 


JavaScript， 版 本 为 1.0。 随 着 网 络 和 网 络 技术 的 不 断 发 展 ，JavaScript 的 功能 越 来 越 强大 与 完 
善 ， 至 今 经 历 了 数 个 版 本 ， 各 个 版 本 的 发 布 日 期 及 功能 如 表 16-1 所 示 。 
表 16-1 JavaScript 的 版 本 

版 本 发 布 日 期 新 增 功 能 

1.0 1996 年 3 月 目前 已 经 不 用 

11 1996 年 8 月 修正 了 1.0 中 的 部 分 错误 ， 并 加 入 了 对 数组 的 支持 

1 入 1997 年 6 月 加 入 了 对 switch 选择 语句 和 正则 表达 的 支持 

(Ke} 1998 年 10 月 | 修正 了 JavaScript 1.2 与 ECMA 1.0 中 不 兼容 的 部 分 

1.4 1999 年 9 月 加 入 了 服务 器 端 功能 

Le 2000 年 11 月 在 JavaScriptl.3 的 基础 上 增加 了 异常 处 理 程序 ， 并 与 ECMA3.0 完全 兼容 

1.6 2005 年 11 月 加 入 对 E4X、 字 符 串 泛 型 的 支持 以 及 新 的 数组 、 数 据 方法 等 新 特性 
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Ty 


续 表 
版 本 发 布 日 期 新 增 功能 
| 在 JavaScript1.6 的 基础 上 加 入 了 生成 器 、 声 明 器 、 分 配 符 变化 、let 表达 式 
1.7 2006 年 10 月 
等 新 特性 
1.8 | 2008 年 6 月 | 更 新 很 少 ， 包 含 了 一 些 向 ECMAScript 4/JavaScript 2 进化 的 痕迹 


LR | 2009 年 6 月 | 只 有 很 少 的 更 新 ， 主 要 集中 在 添加 实时 编译 跟踪 
入 2010 年 7 月 新 增 了 多 个 对 象 属性 


JavaScript 尽管 版 本 很 多 ， 但 是 受 限 于 浏览 器 ， 并 不 是 所 有 版 本 的 JavaScript 都 支持 ， 常 
用 浏览 器 对 JavaScript 版 本 的 支持 如 表 16-2 所 示 。 


表 16-2 浏览 器 支持 的 JavaScript 版 本 
对 JavaScript 的 支持 情况 


Internet Explorer 9 JavaScriptl.1 一 JavaScript1.3 


Firefox 4 JavaScript1.1 一 JavaScript1.8 


JavaScript1.1 一 JavaScriptl.5 
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16.2 ”JavaScript 的 基本 语法 


JavaScript 可 以 直接 用 记事 本 编写 ， 其 中 包括 语句 、 与 语句 相关 的 语句 块 及 注释 。 在 一 条 
语句 内 可 以 使 用 变量 、 表 达 式 等 。 


16.2.1 ”语句 执行 顺序 


JavaScript 程序 按照 在 HTML 文件 中 出 现 的 顺序 逐 行 执行 。 如 果 需 要 在 整个 HTML 文件 
中 执行 ， 最 好 将 其 放 在 HTML 文件 的 <head>...</head> 标 签 当中 。 某 些 代码 ， 如 函数 体内 的 代 
码 ， 不 会 被 立即 执行 ， 只 有 当 所 在 的 函数 被 其 他 程序 调用 时 ， 该 代码 才 被 执行 。 


16.2.2 ”区 分 大 小 写 


JavaScript 对 字母 大 小 写 敏感 ， 也 就 是 说 在 输入 语言 的 关键 字 、 函 数 、 变 量 以 及 其 他 标识 
符 时 ， 一 定 要 严格 区 分 字母 的 大 小 写 。 例 如 ， 变 量 usemame 与 变量 userName 是 两 个 不 同 的 


mp HTML 不 区 分 大 小 写 。 由 于 JavaScript 与 HTML 紧密 相关 ， 这 一 点 很 容易 混淆 ， 

a 许多 JavaScript 对 象 和 属性 都 与 其 代表 的 HTML 标签 或 属性 同名 。 在 HTML 中 ,这 
些 名 称 可 以 以 任意 的 大 小 写 方式 输入 而 不 会 引起 混乱 。 但 在 JavaScript 中 ， 这 些 名 称 
通常 都 是 小 写 的 。 例如， 在 HIML 中 的 事件 处 理 器 属性 ONCLICK 通常 被 声明 为 
onClick 或 Onclick， 而 在 JavaScript 中 只 能 使 用 onclick。 
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16.2.3 ”分 号 与 空格 


在 JavaScript 语句 当中 ， 分 号 是 可 有 可 无 的 ， 这 一 点 与 Java 语言 不 同 ，JavaScript 并 不 要 
求 每 行 必须 以 分 号 作为 语句 的 结束 标志 。 如 果 语 句 的 结束 处 没有 分 号 ，JavaScript 会 自动 将 该 
代码 的 结尾 作为 语句 的 结尾 。 

例如 ， 下 面 的 两 行 代码 书写 方式 都 是 正确 的 。 


Alert ("hello, Javascript") 
Alert ("hello, Javascript"); 


Se 为 了 养 成 良好 的 编写 习惯 ， 最 好 在 每 行 的 最 后 加 上 一 个 分 号 ， 这 样 能 保证 每 行 代 
SS 码 的 准确 性 . 
另外 ，JavaScript 会 忽略 多 余 的 空格 ， 用 户 可 以 向 脚本 添加 空格 ， 来 提高 其 可 读 性 。 下 面 
的 两 行 代码 是 等 效 的 : 


Var name="Hello"; 
var name = "Hello"; 


16.2.4 ”对 代码 行进 行 折 行 


当 一 段 代码 比较 长 时 ， 用 户 可 以 在 文本 字符 串 中 使 用 反 斜 杠 对 代码 行进 行 换行 。 下 面 的 
例子 会 正确 地 显示 : 


document .write ("Hello \ 
World!"); 


不 过 ， 用 户 不 能 像 下 面 这 样 折 行 : 


document .write \ 
("Hello World!"); 


16.2.5 ”注释 


注释 通常 用 来 解释 程序 代码 的 功能 (增加 代码 的 可 读 性 ) 或 阻止 代码 的 执行 (调试 程序 )， 不 
参与 程序 的 执行 。 在 JavaScript 中 注释 分 为 单行 注释 和 多 行 注释 两 种 。 

1. 单行 注释 语句 

在 JavaScript 中 ， 单 行 注释 以 双 斜 本“/” 开 始 ， 直 到 这 一 行 结 束 。 单 行 注释 “/” 可 以 
放 在 行 的 开始 或 一 行 的 末尾 ， 无 论 放 在 哪里 ， 只 要 从 “/” 符 号 开始 到 本 行 结束 为 止 的 所 有 内 
容 都 不 会 执行 。 在 一 般 情况 下 ， 如 果 “/” 位 于 一 行 的 开始 ， 则 用 来 解释 下 一 行 或 一 段 代 码 的 
功能 ;如 果 “//” 位 于 一 行 的 末尾 ， 则 用 来 解释 当前 行 代码 的 功能 。 如 果 用 来 阻止 一 行 代码 的 
执行 ， 也 常 将 “//” 放 在 一 行 的 开始 。 

【 例 16.1】 单行 注释 语句 (实例 文件 ，ch16\16.1.html)。 


| 


<!DOCTYPE html> 

<html> 

<head> 

<title>date 对 象 </title> 

<script type="text/javascript"> 
function disptime( ) 


i 
// 创 建 日 期 对 象 now， 并 实现 当前 日 期 的 输出 
Var now= new Date( ); 
//document .write ("<h1> 河 南 旅游 网 </h1>") ; 
document .write ("<H2> 今 天 日 期 : "+now- getFullYear ()+" 年 "+ (now.getMonth( )+1)+" 
月 "+now.getDate()+" 日 </H2>"); ”// 在 页 面 上 显示 当前 年 月 日 
} 
</script> 
<body onload="disptime( )"> 
</body> 
</html> 


以 上 代码 中 共 使 用 了 三 个 注释 语句 。 第 一 个 注释 语句 将 “//” 符 号 放 在 了 行 首 ， 通 常用 来 
解释 下 面 代码 的 功能 与 作用 。 第 二 个 注释 语句 放 在 了 代码 的 行 首 ， 阻 止 了 该 行 代码 的 执行 。 
第 三 个 注释 语句 放 在 了 行 的 末尾 ， 主 要 是 对 该 行 的 代码 进行 解释 说 明 。 

在 正 9.0 中 浏览 效果 如 图 16-1 所 示 。 可 以 看 到 代码 中 的 注释 不 被 执行 。 

2. 多 行 注释 

单行 注释 语句 只 能 注释 一 行 的 代码 ， 假 设 在 调试 程序 时 ， 和 希望 有 一 段 代 码 都 不 被 浏览 器 
执行 或 者 对 代码 的 功能 说 明 一 行书 写 不 完 ， 那 么 就 需要 使 用 多 行 注 释 语句 。 多 行 注释 语句 以 
此 开始 ， 以 * 结 束 ， 可 以 注释 一 段 代码 。 

【 例 16.2】 多 行 注释 语句 (实例 文件 : ch16\16.2.html)。 


<!DOCTYPE html> 

<html> 

<body> 

<hl id="myH1"></h1l> 

<p id="myP"></p> 

<script type="text/javascript"> 

/* 

下 面 的 这 些 代码 会 输出 

一 个 标题 和 一 个 段落 

并 将 代表 主页 的 开始 

Pad 

document .getElementById ("myHl1") .innerHTML="Welcome to my Homepage"; 
document .getElementById ("myP") .innerHTML="This is my first paragraph."; 
</script> 

<p><b> 注 释 : </b> 注 释 块 不 会 被 执行 。</p> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 16-2 所 示 。 可 以 看 到 代码 中 的 注释 不 被 执行 。 
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今天 日 期 :2015 年 8 月 13 日 


Welcome to my Homepage 


This is my first paragraph. 


注释 ， 注释 块 不 会 被 执行 。 


16-1 ”程序 运行 结果 16-2 ”程序 运行 结果 
16.2.6 ”语句 


JavaScript 程序 是 语句 的 集合 ， 一 条 JavaScript 语句 相当 于 英语 中 的 一 个 完整 句子 。 
AN ”JavaScript 语句 将 表达 式 组 合 起 来 ， 完 成 一 定 的 任务 。 一 条 语句 由 一 个 或 多 个 表达 式 、 关 键 字 
或 运算 符 组 成 ， 语 名 之 间 用 分 号 (:) 隔 开 ， 也 就 是 ， 分 号 是 一 个 JavaScript 语句 的 结束 符号 。 
| 下 面 给 出 JavaScript 语句 的 分 割 示 例 ， 其 中 一 行 就 是 一 条 JavaScript 语句 。 


| Name=“ 张 三 ”; // 将 “ 张 三 ” 赋 值 给 name 
Var today=new Date(); // 将 今天 的 日 期 赋值 给 today 


【 例 16.3】 操作 两 个 HTML 元 素 (实例 文件 ch16\16.3.htmD)。 


<!DOCTYPE html> 

<html> 

<body> 

<h1> 我 的 网 站 </h1> 

<p id="demo"> 一 个 段落 .</p> 

<div id="myDIV"> 一 个 aiv 块 .</div> 

<script type="text/javascript"> 
document .getElementById("demo") .innerHTML="Hello Javascript"; 
document .getElementById ("myDIV") .innerHTML="How are you?"; 

</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 16-3 所 示 。 
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我 的 网 站 


Hello JavaScript 


How are you? 


图 16-3 ”程序 运行 结果 
16.2.7 ”语句 块 
语句 块 是 一 些 语句 的 组 合 ， 通 常 语句 块 都 会 被 一 对 大 括号 括 起 来 。 在 调用 语句 块 时 ， 
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JavaScript 会 按 书 写 次 序 执行 语句 块 中 的 语句 。JavaScript 会 把 语句 块 中 的 语句 看 成 是 一 个 整 
体 全 部 执行 ， 语 句 块 通常 用 在 函数 中 或 流程 控制 语句 中 ， 如 下 所 示 代 码 就 是 一 个 语句 块 。 


if (Fee < 2) 


{ 
Fee = 2; ”// 小 于 2 元 时 ， 手 续费 为 2 元 
} 


语句 块 的 作用 是 使 语句 序列 一 起 执行 。JavaScript 函数 是 将 语句 组 合 在 块 中 的 典型 例子 。 
【 例 16.4】 运行 可 操作 两 个 HTML 元 素 的 函数 (实例 文件 ，ch16\16.4.html)。 


<html> 

<body> 

<h1> 我 的 网 站 </h1> 

<p id="myPar"> 我 是 一 个 段落 .</p> 

<div id="myDiv"> 我 是 一 个 div 块 .</div> 

<p> 

<button type="button" onclick="myFunction() "> 点 击 这 里 </button> 
</p> 

<script type="text/javascript"> 

function myFunction() 


{ 
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document .getElementById ("myPar") .innerHTML="Hello JavaScript"; 
document .getElementById ("myDiv") .innerHTML="How are you?"; 
</script> 
<p> 当 您 点 击 上 面 的 按钮 时 ， 两 个 元 素 会 改变 。</P> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 16-4 所 示 。 单 击 其 中 的 【点 击 这 里 】 按 钮 ， 可 以 看 到 两 个 元 素 
发 生 了 变化 ， 如 图 16-5 所 示 。 
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我 的 网 站 | 我 的 网 站 


我 是 一 个 段落 ， Hello JavaScript 

我 是 一 个 iv 的 How sre you? 

Ee 

当 作 点 击 上 面 的 榨 钮 时 ， 两 个 元 素 会 改变 当 您 点 击 上 面 的 按钮 时 ， 两 个 元 素 会 改变 。 


图 16-4 ”程序 运行 结果 图 16-5 元 素 发 生变 化 


16.3 ”JavaScript 的 数据 结构 


每 一 种 计算 机 编程 语言 都 有 自己 的 数据 结构 ，JavaScript 脚本 语言 的 数据 结构 包括 标识 
符 、 常 量 、 变 量 、 关 键 字 等 。 
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16.3.1 标识 符 


JavaScript 编写 程序 时 ， 很 多 地 方 都 要 求 用 户 给 定名 称 。 例 如 ，JavaScript 中 的 变量 、 函 
数 等 要 素 定义 时 都 要 求 给 定名 称 。 可 以 将 定义 要 素 时 使 用 的 字符 序列 称 为 标识 符 。 这 些 标识 
符 必须 遵循 如 下 命名 规则 。 

e ”标识 符 只 能 由 字母 、 数 字 下 划 线 和 中 文 组 成 ， 而 不 能 包含 空格 、 标 点 符号 、 运 算 符 

等 其 他 符号 。 

e@ ”标识 符 的 第 一 个 字符 必须 是 字母 、 下 划 线 或 者 中 文 。 

@ ”标识 符 不 能 与 JavaScript 中 的 关键 字 名 称 相 同 ， 如 过 、else 等 。 

例如 ， 下 面 为 合法 的 标识 符 : 

UserName 

Int2 

File Open 

Sex 

例如 ， 下 面 为 不 合法 的 标识 符 : 


99BottlesofBeer 
Namespace 
ItssAlL Over 


16.3.2 ”关键 字 


关键 字 标 识 了 JavaScript 语句 的 开头 或 结尾 。 根 据 规定 ， 关 键 字 是 保留 的 ， 不 能 用 作 变量 
名 或 函数 名 。JavaScript 中 的 关键 字 如 表 16-3 所 示 。 


表 16-3 ” JavaScript 中 的 关键 字 


au |e 


continue 


default 


finally function 让 
in instanceof new | return 
switch this throw ty 


typeof Var 


16.3.3 保留 字 


保留 字 在 某 种 意思 上 是 为 将 来 的 关键 字 而 保留 的 单词 。 因 此 ， 保 留 字 不 能 被 用 作 变 量 名 
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或 函数 名 。JavaScript 中 的 保留 字 如 表 16-4 所 示 。 


表 16-4 JavaScript 中 的 保留 字 


abstract boolean byte 

class Const debugger 
enum export extends 
float goto implements 
int interface long 


protected 


volatile 
rg 如 果 将 保留 字 用 作 变 量 名 或 函数 名 ， 那 么 除非 将 来 的 浏览 器 实现 了 该 保留 字 ， 否 


汇 。 则 很 可 能 收 不 到 任何 错误 消息 。 当 浏览 器 将 其 实现 后 ， 该 单词 将 被 看 作 关键 字 ， 如 此 
将 出 现 关键 字 错 误 。 


synchronized 


transient 


16.3.4 ”常量 


简单 地 说 ， 常 量 是 字面 变量 ， 是 固化 在 程序 代码 中 的 信息 ， 常 量 的 值 从 定义 开始 就 是 固 
定 的 。 常 量 主 要 用 于 为 程序 提供 固定 和 精确 的 值 ， 包 括 数值 和 字符 串 ， 如 数字 、 逮 辑 值 真 
(true)、 逻 辑 值 假 (false) 等 都 是 常量 。 

常量 通常 使 用 const 来 声明 。 语 法 格式 如 下 。 


const 


常量 名 : 数据 类 型 = 值 ; 
16.3.5 ”变量 


变量 ， 顾 名 思 义 ， 是 指 在 程序 运行 过 程 中 ， 其 值 可 以 改变 。 变 量 是 存储 信息 的 单元 ， 它 
对 应 于 某 个 内 存 空间 ， 变 量 用 于 存储 特定 数据 类 型 的 数据 ， 用 变量 名 代表 其 存储 空间 。 程 序 
能 在 变量 中 存储 值 和 取出 值 ， 可 以 把 变量 比 作 超市 的 货架 (内 存 )， 货 架 上 摆 放 着 商品 (变量 )， 
可 以 把 商品 从 货架 上 取出 来 ( 读 取 )， 也 可 以 把 商品 放 入 货架 (赋值 )。 

1. 变量 的 命名 

实际 上 ， 变 量 的 名 称 是 一 个 标识 符 。 在 JavaScript 当中 ， 用 标识 符 来 命令 变量 和 函数 ， 变 
量 的 名 称 可 以 是 任意 长 度 。 创 建 变 量 名 称 时 ， 应 该 遵循 以 下 命名 规则 。 

e 第 一 个 字符 必须 是 一 个 ASCII 字符 (大 小 写 均 可 ) 或 一 个 下 划 线 (_ )， 但 是 不 能 是 

文字 。 

e@ ”后 续 的 字符 必须 是 字母 、 数 字 或 下 划 线 。 

e@ ”变量 名 称 不 能 是 JavaScript 的 保留 字 。 

@ JavaScript 的 变量 名 是 严格 区 分 大 小 写 的 。 例 如 ， 变 量 名 称 myCounter 与 变量 名 称 


a 
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MyCounter 是 不 同 的 。 
下 面 给 出 一 些 合法 的 变量 命名 示例 。 
Pagecount 
Part9 
Numer 
下 面 给 出 一 些 错误 的 变量 命名 示例 。 
12balloon // 不 能 以 数字 开头 
Summary&Went //“ 与 ”符号 不 能 用 在 变量 名 称 中 


2. 变量 的 声明 与 赋值 

JavaScript 是 一 种 弱 类 型 的 程序 设计 语言 ， 变 量 可 以 不 声明 直接 使 用 。 所 谓 声明 变量 ， 即 
为 变量 指定 一 个 名 称 。 声 明 变 量 后 ， 就 可 以 把 它们 用 作 存 储 单元 。 

JavaScript 中 使 用 关键 字 var 声明 变量 ， 在 这 个 关键 字 之 后 的 字符 串 将 代表 一 个 变量 名 。 
其 格式 为 : 

var 标识 符 ; 

例如 ， 声 明 变 量 usemame， 用 来 表示 用 户 名 ， 代 码 如 下 。 


Var username; 


另外 ， 一 个 关键 字 var 也 可 以 同时 声明 多 个 变量 名 ， 多 个 变量 名 之 间 必 须 用 逗号 “,” 分 
隔 。 例 如 ， 同 时 声明 变量 username、pwd、age， 分 别 表示 用 户 名 、 密 码 和 年 龄 ， 代 码 如 下 。 

var username,pwd,age; 

要 给 变量 赋值 ， 可 以 使 用 JavaScript 中 的 赋值 运算 符 ， 即 等 于 号 (=)。 

可 以 在 声明 变量 名 时 同时 赋值 ， 例 如 ， 声 明 变量 username， 并 赋值 为 “ 张 三 ”， 代 码 如 下 。 

var username=" 张 三 "; 


也 可 以 声明 变量 之 后 ， 对 变量 赋值 ， 或 者 对 未 声明 的 变量 直接 赋值 。 例 如 ， 声 明 变量 
age， 然 后 再 为 它 赋值 ， 以 及 直接 对 变量 count 赋值 ， 代 码 如 下 。 


var age // 声 明 变量 
age=18; // 对 已 声明 的 变量 赋值 
count=4; // 对 未 声明 的 变量 直接 赋值 
Sm JavaScript 中 的 变量 如 果 未 初始 化 (赋值 )， 默 认 值 为 undefind。 


3. 变量 的 作用 范围 
所 谓 变量 的 作用 范围 ， 是 指 可 以 访问 该 变量 的 代码 区 域 。JavaScript 中 按 变量 的 作用 范围 
分 为 全 局 变量 和 局 部 变量 。 
®@ 全 局 变量 : 可 以 在 整个 HTML 文档 范围 中 使 用 的 变量 ， 这 种 变量 通常 都 是 在 函数 体 
外 定义 的 变量 。 


e ”局 部 变量 : 只 能 在 局 部 范围 内 使 用 的 变量 ， 这 种 变量 通常 都 是 在 函数 体内 定义 的 变 
量 ， 所 以 只 在 函数 体 中 有 效 。 


;| 省 略 关键 字 var 声明 的 变量 ， 无 论 是 在 函数 体内 ， 还 是 在 函数 体外 ， 都 是 全 局 
AS。 交 旺 。 


【 例 16.5】 创建 名 为 camame 的 变量 ， 并 向 其 赋值 Volvo， 然 后 把 它 放 入 id="demo" 的 
HTML 段落 中 (实例 文件 :ch16\16.5.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<p> 点 击 这 里 来 创建 变量 ， 并 显示 结果 。</p> 
<button onclick="myFunction() "> 点击 这 里 </button> 
<p id="demo"></p> 
<script type="text/javascript"> 
function myFunction() 
{ 
Var carname="Volvo"; 
document .getElementById ("demo") .innerHTML=carname; 
} 
</script> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 16-6 所 示 。 单 击 其 中 的 【点 击 这 里 】 按 钮 ， 可 以 看 到 页 面 发 生 
了 变化 ， 如 图 16-7 所 示 。 


uma D> CX] Ste smi © 5 oxj auwwa 
IN ME EBV KA IRM Ww RSE BEV CE TRIT Mo 


点 击 这 里 来 鹿 建 变 重 ， 并 显示 结果 、 高 击 这 里 林冲 建 突 便 ， 并 旺 元 接 果 。 
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图 16-6 程序 运行 结果 图 16-7 页 面 发 生变 化 
Em 一 个 好 的 编程 习惯 是 ， 在 代码 开始 处 ， 统 一 对 需要 的 变量 进行 声明 。 
二 


16.4 JavaScript 的 数据 类 型 


每 一 种 计算 机 语言 除了 有 自己 的 数据 结构 外 ， 还 具有 自己 所 支持 的 数据 类 型 。 在 
JavaScript 脚本 语言 当中 ， 采 用 的 是 弱 数据 方式 ， 即 一 个 数据 不 必 首先 作 声明 ， 可 以 在 使 用 或 
赋值 时 再 确定 其 数据 的 类 型 ， 当 然 也 可 以 先 声明 该 数据 类 型 。 
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16.4.1 案例 1 一 一 typeof 运算 符 
typeof 运算 符 有 一 个 参数 ， 即 要 检查 的 变量 或 值 。 例 如 : 


Var sTemp = "test string™"; 
alert (typeof sTemp); // 输 出 "string" 
alert (typeof 86); // 输 出 "number" 


对 变量 或 值 调用 typeof 运算 符 将 返回 下 列 值 之 一 。 

@ ”undefined: 如 果 变 量 是 Undefined 类 型 的 。 

boolean: 如 果 变 量 是 Boolean 类 型 的 。 

number: 如 果 变 量 是 Number 类 型 的 。 

string: 如 果 变 量 是 String 类 型 的 。 

object: 如 果 变 量 是 一 种 引用 类 型 或 Null 类 型 的 。 

【 例 16.6】 typeof 运算 符 的 使 用 (实例 文件 ，ch16\16.6.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<script type="text/javascript"> 
typeof (1) 7 
typeof (NaN); 
typeof (Number .MIN VALUE); 
typeof (Infinity); 
typeof ("123"); 
typeof (true); 
typeof (window); 
typeof (document); 
typeof (nul1) 7 
typeof (eval) 7 
typeof (Date) 7 
typeof (sss) 7 
typeof (undefined) 
document .write ("typeof(1): "+typeof (1)+"<br>"); 
document .write ("typeof (NaN): "+typeof (NaN)+"<br>"); 
document .write ("typeof (Number.MIN VALUE): 
"+typeof (Number .MIN VALUE)+"<br>") 
document .write ("typeof (Infinity): "+typeof (Infinity)+"<br>") 
document .write ("typeof (\"123\"): "+typeof ("123")+"<br>") 
document .write ("typeof(true): "+typeof (true)+"<br>") 
document .write ("typeof (window): "+typeof (window)+"<br>") 
document .write ("typeof (document): "+typeof (document)+"<br>") 
document .write ("typeof (null): "+typeof (null)+"<br>") 
document .write ("typeof (eval): "+typeof (eval)+"<br>") 
document .write ("typeof (Date): "+typeof (Date)+"<br>") 
document .write ("typeof(sss): "+typeof (sss)+"<br>") 
document .write ("typeof (undefined): "+typeof (undefined)+"<br>") 
</script> 
</body> 
</html> 
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在 正 9.0 中 浏览 效果 如 图 16-8 所 示 。 
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typeof (1): nunber 
ypeaf NaN) ;number 
| typeor Germber MIN VALUE) : mmber 


‘colean 
typeof (window): object 
Dtypeof (docunent); object 


Dtypeof (sss): andcfined 
typeof (undeFined) : umdcfincd 


图 16-8 程序 运行 结果 
16.4.2 ”案例 2 一 一 Undefined 类 型 


Undefined 是 未 定义 类 型 的 变量 ， 表 示 变 量 还 没有 赋值 ， 如 “var a;”， 或 者 赋予 一 个 不 存 
在 的 属性 值 ， 例 如 var a=String.notProperty。 

此 外 ，JavaScript 中 有 一 种 特殊 类 型 的 数字 常量 NaN， 表 示 “ 非 数字 ”， 当 在 程序 中 由 于 
某 种 原因 发 生计 算 错 误 后 ， 将 产生 一 个 没有 意义 的 数字 ， 此 时 JavaScript 返回 的 数字 值 就 是 
NaN。 

【 例 16.7】 使 用 Undefined (实例 文件 : ch16\16.7.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<script type="text/javascript"> 
var person; 
document .write (person + "<br />"); 
</script> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 16-9 所 示 。 


undefined 


图 16-9 ”程序 运行 结果 
16.4.3 ”案例 3 一 一 Null 类 型 
JavaScript 中 的 关键 字 Null 是 一 个 特殊 的 值 ， 表 示 空 值 ， 用 于 定义 空 的 或 不 存在 的 引用 。 
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不 过 ，Null 不 等 同 于 空 的 字符 串 或 0。 由 此 可 见 ，Null 与 Undefined 的 区 别 是 : Null 表示 一 个 
变量 被 赋予 了 一 个 空 值 ， 而 Undefined 则 表示 该 变量 还 未 被 赋值 。 
【 例 16.8】 使 用 Null (实例 文件 : ch16\16.8.html)。 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 
var person; 
document .write (person + "<br />"); 
var car=null 
document .write (car + "<br />"); 

</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 16-10 所 示 。 
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图 16-10 程序 运行 结果 
16.4.4 ”案例 4 一 一 Boolean 类 型 


布尔 类 型 Boolean 表示 一 个 逻辑 数值 ， 用 于 表示 两 种 可 能 的 情况 。 逻 辑 真 ， 用 true 表 
示 ; 逻辑 假 ， 用 false 表示 。 通 常 ， 我 们 使 用 1 表示 真 ，0 表示 假 。 
【 例 16.9】 使 用 Boolean 类 型 (实例 文件 ，ch16\16.9.html)。 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 


var bl = Boolean("");// 返 回 false, 空 字符 串 


var b2 = Boolean("s");// 返 回 true, 非 空 字符 串 

Var b3 = Boolean (0);// 返 回 false, 数 字 0 

var b4 = Boolean (1);// 返 回 true, 非 0 数字 

var b5 = Boolean(-1);// 返 回 true, 非 0 数字 

var b6 = Boolean (nul1);// 返 回 false 

var b7 = Boolean (undefined);// 返 回 false 

var b8 = Boolean (new Object ());// 返 回 true, 对象 


document .write(bl + "<br>") 


document .write(b2 + "<br>") 
document .write(b3 + "<br>") 
document .write(b4 + "<br>") 
document .write(b5 + "<br>") 
document .write(b6 + "<br>") 
document .write(b7 + "<br>") 


document -write (b8 + "<br>") 
</script> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 16-11 所 示 。 


图 16-11 程序 运行 结果 
16.4.5 ”案例 5 一 一 Number 类 型 


JavaScript 的 数值 类 型 可 以 分 为 4 类 ， 即 整数 、 浮 上 点数、 内 部 常量 和 特殊 值 。 整 数 可 以 为 
正 数 、0 或 者 负数 ， 浮 点 数 可 以 包含 小 数 点 ， 也 可 以 包含 一 个 e( 大 小 写 均 可 ， 在 科学 记 数 法 
中 表示 “10 的 寡 ”)， 或 者 同时 包含 这 两 项 。 整 数 可 以 以 10( 十 进 制 )、8( 八 进 制 ) 和 16( 十 六 进 
制 ) 作 为 基数 来 表示 。 

【 例 16.10】 输出 数值 (实例 文件 ，ch16\16.10.html)。 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 
Var xl1=36.00; 
Var x2=36; 
var y=123e5; 
Var z=123e-5; 
document .write (xl + "<br />") 
document .write (x2 + "<br />") 
document .write(y + "<br />") 
document .write(z + "<br />") 

</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 16-12 所 示 。 
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16.4.6 ”案例 6 一 一 String 类 型 


字符 串 是 用 一 对 单 引号 ( ) 或 双 引 号 (" ") 和 引号 中 的 部 分 构成 的 。 一 个 字符 串 也 是 
JavaScript 中 的 一 个 对 象 ， 有 专门 的 属性 。 引 号 中 间 的 部 分 可 以 是 任意 多 的 字符 ， 如 果 没 有 则 
是 一 个 空 字符 串 。 如 果 要 在 字符 串 中 使 用 双 引 号 ， 则 应 该 将 其 包含 在 使 用 单 引 号 的 字符 串 
中 ， 使 用 单 引号 时 则 反之 。 

【 例 16.11】 输出 字符 串 (实例 文件 ，ch16\16.11.htmD)。 


<!DOCTYPE html> 
<html> 
<body> 
<script type="text/javascript"> 
Var stringl="Bill Gates"; 
Var string2='Bill Gates'; 
Var string3="Nice to meet you!"; 
Var string4="He is called 'Bill'"; 
var string5='He is called "Bill"'; 
document .write(stringl + "<br>") 
document .write (string2 + "<br>") 
document .write(string3 + "<br>") 
+ 
+ 


document .write (string4 sebr>")y 
document .write (string5 DT 
/sacript> 
</body> 
</html> 


在 卫 9.0 中 浏览 效果 如 图 16-13 所 示 。 
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16-13 ”程序 运行 结果 
16.4.7 案例 7 一 一 Object 类 型 


前 面 介绍 的 5 种 数据 类 型 是 JavaScript 的 原始 数据 类 型 ， 而 Object 是 对 象 类 型 。 该 数据 
类 型 中 包括 Object、Function、String、Number、Boolean、Array、RegExp、Date、Global、 
Math、Error， 以 及 宿主 环境 提供 的 Object 类 型 。 

【 例 16.12】 Object 数据 类 型 的 使 用 (实例 文件 ，ch16\16.12.html)。 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 
Person=new Object (); 
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person.firstname="Bill"; 

person.lastname="Gates"; 

person.age=56; 

person.eyecolor="blue"; 

document .write (person.firstname + " is " + person.age + " years old."); 
</script> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 16-14 所 示 。 
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图 16-14 ”程序 运行 结果 


16.5 ”JavaScript 的 运算 符 


在 JavaScript 的 程序 中 要 完成 各 种 各 样 的 运算 ， 是 离 不 开 运 算 符 的 。 它 用 于 将 一 个 或 几 个 
值 进行 运算 而 得 出 所 需要 的 结果 值 。 在 JavaScript 中 ， 运 算 符 按 类 型 可 以 分 为 算术 运算 符 、 比 
较 运算 符 、 赋 值 运 算 符 、 逻 辑 运算 符 和 条 件 运算 符 等 。 


16.5.1 案例 8 一 一 算术 运算 符 


算术 运算 符 是 最 简单 、 最 常用 的 运算 符 ， 所 以 有 时 也 称 它们 为 简单 运算 符 ， 可 以 使 用 它 
们 进行 通用 的 数学 计算 。 

JavaScript 语言 中 提供 的 算术 运算 符 有 +、-、*、/、%、++、 一 7 种 ， 分 别 表示 加 、 减 、 
乘 、 除 、 求 余数 、 自 加 和 自 减 ， 如 表 16-5 所 示 。 其 中 +、-、*、/、%5 种 为 二 元 运算 符 ， 表 
示 对 运算 符 左右 两 边 的 操作 数 作 算 术 ， 其 运算 规则 与 数学 中 的 运算 规则 相同 ， 即 先 乘除 后 加 
减 。++、-- 两 种 运算 符 都 是 一 元 运算 符 ， 其 结合 性 为 自 右 向 左 ， 在 默认 情况 下 表示 对 运算 符 
右边 的 变量 的 值 增 1 或 减 1， 而 且 它们 的 优先 级 比 其 他 算术 运算 符 高 。 


表 16-5 算术 运算 符 


说 了 明 示 例 
加 法 运算 符 ， 用 于 对 两 个 数字 进行 求 和 x+100、100+1000、+100 


减法 运算 符 或 负 值 运算 符 100-60、-100 
乘法 运算 符 100*6 
除法 运算 符 100/50 


加 
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续 表 


求 模 运 算 符 ， 也 就 是 算术 中 的 求 余 100%30 
x++ 用 于 在 参与 其 他 运算 之 前 先 将 自己 
加 1 后 ， 再 用 新 的 值 参与 其 他 运算 
++x 用 于 先 用 原 值 参与 其 他 运算 后 ， 再 
将 自己 加 1 
将 变量 值 减 1 后 再 将 结果 赋值 给 该 变量 x--、--x 与 + 的 用 法 相同 

【 例 16.13】 通过 JavaScript 在 页 面 中 定义 变量 ， 再 通过 运算 符 计算 变量 的 运行 结果 ( 实 

例文 件 :ch16\16.13.html)。 


<!DOCTYPE html> 


将 变量 值 加 1 后 再 将 结果 赋值 给 该 变量 


<html> 

<head> 

<title> 运 用 Javascript 运算 符 </title> 

</head> 

<body> 

<script type="text/javascript"> 
var numl=120,num2 = 25; // 定 义 两 个 变量 
document .write ("120+25=" + (numl+num2)+"<br>"); // 计 算 两 个 变量 的 和 
document .write ("120-25="+ (numl-num2)+"<br>"); // 计 算 两 个 变量 的 差 
document .write ("120*25="+ (numl*num2)+"<br>"); // 计 算 两 个 变量 的 积 
document .write ("120/25="+ (numl/num2)+"<br>"); // 计 算 两 个 变量 的 余数 
document .write("(120++)="+ (numl++)+"<br>"); // 自 加 运算 
document .write("++120="+(++numl)+"<br>"); 

</acript> 

</body> 

</html> 


在 IE 9.0 中 浏览 效果 如 图 16-15 所 示 。 


图 16-15 程序 运行 结果 
16.5.2 ”案例 9 一 一 比较 运算 符 


比较 运算 符 用 于 对 运算 符 的 两 个 表达 式 进行 比较 ， 然 后 根据 比较 结果 返回 布尔 类 型 的 值 
true 或 false。 例 如 ， 比 较 两 个 值 是 否 相 同 或 比较 两 个 数字 值 的 大 小 等 。 在 表 16-6 中 列 出 了 
JavaScript 支持 的 比较 运算 符 。 


表 16-6 比较 运算 符 


运算 符 说 明 示 例 
判断 左右 两 边 表达 式 是 否 相 等 ， 当 左边 表达 式 等 于 右边 | Number == 100 
表达 式 时 返回 tue， 否 则 返回 false Numberl =—= Number2 
阳 判断 左边 表达 式 是 否 不 等 于 右边 表达 式 ， 当 左边 表达 式 | Number != 100 
于 不 等 于 右边 表达 式 时 返回 tue， 否 则 返回 false Numberl != Number2 
判断 左边 表达 式 是 否 大 于 右边 表达 式 ， 当 左边 表达 式 大 | Number > 100 

> 
于 右边 表达 式 时 返回 tue， 和 否则 返回 false Numberl > Number2 
判断 左边 表达 式 是 否 大 于 等 于 右边 表达 式 ， 当 左边 表达 | Number >= 100 

>= 
式 大 于 等 于 右边 表达 式 时 返回 rue， 否则 返回 false Numberl >= Number2 
判断 左边 表达 式 是 否 小 于 右边 表达 式 ， 当 左边 表达 式 小 | Number < 100 

< 
于 右边 表达 式 时 返回 tue， 否 则 返回 false Numberl < Number2 
判断 左边 表达 式 是 否 小 于 等 于 右边 表达 式 ， 当 左边 表达 | Number <= 100 

<= 
式 小 于 等 于 右边 表达 式 时 返回 tue， 否 则 返回 false Numberl <= Number2 

【 例 16.14】 使 用 比较 运算 符 比 较 两 个 数值 的 大 小 (实例 文件 :ch16\16.14.htmD。 

<!DOCTYPE html> 

<html> 

<head> 

<title> 比 较 运算 符 的 使 用 </title> 

</head> 

<body> 


<script type="text/javascript"> 
Var age = 25; 
document .write ("age 变量 的 值 为 : "+aget+"<br>"); 
document .write ("age>=20: "+(age>=20)+"<br>"); 
document .write ("age<20: "+(age<20)+"<br>"); 
document .write ("age!=20: "+(age!=20)+"<br>"); 
document .write ("age>20: "+(age>20)+"<br>"); 


</script> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 16-16 所 示 。 
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图 16-16 程序 运行 结果 


// 定 义 变量 
// 输 出 变量 值 
// 实 现 变量 值 比较 
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16.5.3 ”案例 10 


位 运算 符 


任何 信息 在 计算 机 中 都 是 以 二 进 制 的 形式 保存 的 。 位 运算 符 就 是 对 数据 按 二 进 制 位 进行 
运算 的 运算 符 。JavaScript 语言 中 的 位 运算 符 有 : & 与 、| 或 、“^ 异 或 、~ 取 补 、<< 左 移 、>> 右 
移 ， 如 表 16-7 所 示 。 其 中 ， 取 补 运算 符 为 一 元 运算 符 ， 而 其 他 位 运算 符 都 是 二 元 运算 符 。 这 
些 运算 都 不 会 产生 溢出 。 位 运算 符 的 操作 数 为 整 型 或 者 是 可 以 转换 为 整 型 的 任何 其 他 类 型 。 


表 16-7 位 运算 符 


与 运算 。 操 作 数 中 的 两 个 位 都 为 1， 结 果 为 1， 两 个 位 中 有 一 个 为 0， 结 果 为 0 
或 运算 。 操 作 数 中 的 两 个 位 都 为 0， 结 果 为 0， 否则 ， 结 果 为 1 
异 或 运算 。 两 个 操作 位 相同 时 ， 结 果 为 0， 不 相同 时 ， 结 果 为 1 
取 补 运算 ， 操 作 数 的 各 位 取 反 ， 即 1 变 为 0，0 变 为 1 
左 移 位 。 操 作 数 按 位 左 移 ， 高 位 被 丢弃 ， 低 位 顺序 补 0 
右 移 位 。 操 作 数 按 位 右 移 ， 低 位 被 丢弃 ， 其 他 各 位 顺序 依次 右 移 


【 例 16.1S】 输出 十 进 制 数 18 的 二 进 制 数 (实例 文件 ，ch16\16.15.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<h1> 输 出 十 进 制 18 的 二 进 制 数 </h1> 
<script type="text/javascript"> 
var iNum = 18; 
alert (iNum.toSstring (2)); 
</script> 
</body> 
</html> 


在 了 E 9.0 中 浏览 效果 如 图 16-17 所 示 。18 的 二 进 制 数 只 用 了 前 5 位 ， 它 们 是 这 个 数字 的 
有 效 位 。 把 数字 转换 成 二 进 制 字符 串 ， 只 能 看 到 有 效 位 。 这 段 代 码 只 输出 10010， 而 不 是 18 
的 32 位 表示 。 这 是 因为 其 他 数位 并 不 重要 ， 仅 使 用 前 5 位 即 可 确定 这 个 十 进 制 数值 。 
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图 16-17 程序 运行 结果 
16.5.4 ”案例 11 一 一 逻辑 运算 符 
逻辑 运算 符 通常 用 于 执行 布尔 运算 ， 它 们 常 和 比较 运算 符 一 起 使 用 来 表示 复杂 比较 运 


算 ， 这 些 运算 涉及 的 变量 通常 不 止 一 个 ， 而 且 常 用 于 过 、while 和 for 语句 中 。 表 16-8 列 出 了 


JavaScript 支持 的 逻辑 运算 符 。 


表 16-8 逻辑 运算 符 


说 明 


示 例 


逻辑 与 ， 若 两 边 表达 式 的 值 都 为 tue， 则 返回 true; 任意 一 


个 值 为 false， 则 返回 false 


逻辑 或 ， 只 有 表达 式 的 值 都 为 false 时 ， 才 返回 false 


逻辑 非 ， 若 表达 式 的 值 为 rue， 则 返 


【 例 16.16】 


<!DOCTYPE html> 

<html> 

<body> 

<h1> 逻 辑 运算 符 的 使 用 </h1> 

<script type="text/javascript"> 
Var a=true,b=false; 
document .write(!a); 
document .write ("<br 
document .write(!b); 
document .write ("<br 
a=true,b=true; 
document .write (a&&b); 
document .write("<br />"); 
document .write (al |b); 
document .write ("<br />"); 
a=true,b=false; 
document .write (a&g&b); 
document .write("<br />"); 
document .write(al |b); 
document .write ("<br />"); 
a=false,b=false; 
document .write (a&g&b); 
document .write("<br />"); 
document .write(al |b); 
document .write("<br />"); 
a=false,b=true; 
document .write (a&g&b); 
document .write ("<br />"); 
document .writel(allb); 

</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 16-18 所 示 。 
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false， 否 则 返回 true 


100>60 &&100<200 返回 true 
100>50&&10>100 返回 false 
100>60||10>100 返回 true 
100>600||50>60 返回 false 
!(100>60) 返 回 false 
!(100>600) 返 回 true 


逻辑 运算 符 的 使 用 (实例 文件 : ch16\16.16.html)。 
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16-18 ”程序 运行 结果 


从 运行 结果 可 以 看 出 逻辑 运算 符 的 规律 ， 具 体 如 下 。 

@ true 的 ! 为 false，false 的 ! 为 true。 

@ a&&b: a、b 全 tre 表达 式 为 tme， 否 则 表达 式 为 false。 
@ allb: a、b 全 false 表达 式 为 false， 否 则 表达 式 为 true。 


16.5.5 ”案例 12 一 一 条 件 运 算 符 


除了 上 面 介绍 的 常用 运算 符 外 ，JavaScript 还 支持 条 件 表达 式 运 算 符 “?”， 这 个 运算 符 
是 个 三 元 运算 符 ， 它 有 三 个 部 分 : 一 个 计算 值 的 条 件 和 两 个 根据 条 件 返回 的 真 假 值 。 其 格式 
如 下 。 


条 件 ? 表示 式 1 : 表达 式 2 


在 使 用 条 件 运 算 符 时 ， 如 果 条 件 为 真 ， 则 表达 值 使 用 表达 式 1 的 值 ， 否 则 使 用 表达 式 2 
的 值 。 示 例如 下 : 


SR 


如 果 x 的 值 大 于 y 的 值 ， 则 表达 式 的 值 为 300; 否则 ， 如 果 x 的 值 小 于 或 等 于 y 的 值 ， 
则 表达 式 的 值 为 11。 
【 例 16.17】 条 件 运算 符 的 使 用 (实例 文件 : ch16\16.17.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<h1> 条 件 运 算 符 的 使 用 </h1> 
<script type="text/javascript"> 
Var a=3; 
Var b=5; 
Var c=b-a; 
document .write (c+"<br>"); 
if(a>b) 
{ document .write ("a 大 于 b<br>");} 
else 
{ document .write ("a 小 于 b<br>");} 
document .write (a>b2"2":"3") 7 
</script> 
</body> 
</html> 


a 


上 面 代码 创建 了 两 个 变量 a 和 b， 变 量 c 的 值 是 b 和 a 的 差 。 下 面 使 用 寺 语 句 判断 a 和 b 
的 大 小 ， 并 输出 结果 。 最 后 使 用 了 一 个 三 元 运算 符 ， 如 果 a>b， 则 输出 2， 否 则 输出 3。<br> 
表示 在 网 页 中 换行 ，“+” 是 一 个 连接 字符 串 。 

在 正 9.0 中 浏览 效果 如 图 16-19 所 示 ， 可 以 看 到 网 页 输出 了 JavaScript 语句 的 执行 结果 。 


条 件 运 算 符 的 使 用 


16-19 条件 运算 符 的 使 用 


16.5.6 ”案例 13 一 一 赋值 运算 符 


赋值 就 是 把 一 个 数据 赋值 给 一 个 变量 。 例 如 ，myName=" 张 三 "的 作用 是 执行 一 次 同步 操 
作 ， 把 常量 " 张 三 "赋值 给 变量 myName。 赋 值 运算 符 为 二 元 运算 符 ， 要 求 运算 符 两 侧 的 操作 数 
类 型 必须 一 致 。JavaScript 中 提供 有 简单 赋值 运算 符 和 复合 赋值 运算 符 两 种 ， 如 表 16-9 所 示 。 
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表 16-9 赋值 运算 符 
运算 符 说 明 示 例 
= 将 右边 表达 式 的 值 赋值 给 左边 的 变量 Usermmame="Bill”" 
二 = 将 运算 符 左边 的 变量 加 上 右边 表达 式 的 值 赋值 给 左边 的 变量 _| at+=b /相当 于 a=atb 
-= 将 运算 符 左边 的 变量 减 去 右边 表达 式 的 值 赋值 给 左边 的 变量 _| a-=b /相当 于 a=a-b 
*= 将 运算 符 左 边 的 变量 乘 以 右边 表达 式 的 值 赋 值 给 左边 的 变量 | a*=b // 相 当 于 a=a*b 
三 将 运算 符 左 边 的 变量 除 以 右边 表达 式 的 值 赋 值 给 左边 的 变量 | a/=b /相当 于 a=a/b 
将 运算 符 左 边 的 变量 用 右边 表达 式 的 值 求 模 ， 并 将 结果 赋 给 
%= a%=b /相当 于 a=a%b 
左边 的 变量 
将 运算 符 左 边 的 变量 与 右边 表达 式 的 变量 进行 逻辑 与 运算 ， 
&= a&=b // 相 当 于 a=a&b 
将 结果 赋 给 左边 的 变量 
将 运算 符 左 边 的 变量 与 右边 表达 式 的 变量 进行 逻辑 或 运算 ， 
FE al=b /相当 于 a=allb 
将 结果 赋 给 左边 的 变量 
将 运算 符 左边 的 变量 与 右边 表达 式 的 变量 进行 逻辑 异 或 运 
人 2 a^=b /相当 于 a=a^b 
算 ， 将 结果 赋 给 左边 的 变量 


;| 在 书写 复合 赋值 运算 符 时 ， 两 个 符号 之 间 一 定 不 能 有 空格 ， 否 则 将 会 出 错 . 


【 例 16.18】 赋值 运算 符 的 使 用 (实例 文件 : ch16\16.18.html)。 


5@ 


全 346 


网 页 设计 与 网 站 建设 
案例 课堂 ~ 


<!IDOCTYPE html> 
<html> 
<body> 
<h3> 赋 值 运 算 符 的 使 用 规则 </h3> 
<p><strong> 如 果 把 数字 与 字符 串 相 加 ， 结 果 将 成 为 字符 串 。</strong></p> 
<script type="text/javascript"> 
X=5+57 
document .write (x); 
document .write("<br />"); 
le st ee 
document .write (x); 
document .write ("<br />"); 
X=5+"5"; 
document .write (x); 
document .write("<br />"); 
X="5"+5? 
document .write (x); 
document .write ("<br />"); 
</script> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 16-20 所 示 。 
_ EE 
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赋值 运算 符 的 使 用 规则 
如 果 把 殖 字 与 宁 符 串 相 加 ， 结 果 将 成 为 字符 趾 。 


16-20 ”程序 运行 结果 
16.5.7 案例 14 一 一 运算 符 优先 级 


运算 符 的 种 类 非常 多 ， 通 常 不 同 的 运算 符 又 构成 了 不 同 的 表达 式 ， 甚 至 一 个 表达 式 中 又 
包含 有 多 种 运算 符 。 因 此 ， 它 们 的 运算 方法 应 该 有 一 定 的 规律 性 。JavaScript 语言 规定 了 各 类 
运算 符 的 运算 级 别 及 结合 性 等 ， 如 表 16-10 所 示 。 


表 16-10 ”运算 符 优先 级 别 


优先 级 (1 最 高 ) 
和 


自 加 / 自 减 运算 符 
乘法 运算 符 、 除 法 运算 符 、 取 模 运 算 符 


加 法 运算 符 、 减 法 运算 符 
小 于 s 小 于 等 于 ， 大 于 、 大 于 等 于 


向 


建议 在 写 表 达 式 的 时 候 ， 如 果 无 法 确定 运算 符 的 有 效 顺序 ， 则 尽量 采用 括号 来 保证 运算 
的 顺序 ， 这 样 也 使 得 程序 一 目 了 然 ， 而 且 自己 在 编程 时 能 够 思路 清晰 。 
【 例 16.19】 运算 符 的 优先 级 (实例 文件 ，ch16\16.19.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 运 算 符 的 优先 级 </title> 

</head> 

<body> 

<script language="javascript"> 
Var a=1+2*37 // 按 自动 优先 级 计算 
var b=(1+2)*3; // 使 用 () 改变 运算 优先 级 
alert ("a="+a+"\nb="+b); // 分 行 输出 结果 

</script> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 16-21 所 示 。 
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16.6 ”JavaScript 的 表达 式 


表达 式 是 一 个 语句 的 集合 ， 像 一 个 组 一 样 ， 计 算 结果 是 个 单一 值 ， 然 后 该 结果 被 
JavaScript 归 入 下 列 数据 类 型 之 一 : 布尔 、 数 字 、 字 符 串 、 对 象 等 。 

一 个 表达 式 本 身 可 以 是 一 个 数字 或 者 变量 ， 或 者 它 可 以 包含 许多 连接 在 一 起 的 变量 关 
键 字 以 及 运算 符 。 例 如 ， 表 达 式 xy， 分 别 使 自由 变量 x 和 y 定 值 为 10 和 5， 其 输出 为 数 
字 2; 但 在 y 值 为 0 时 则 没有 定义 。 一 个 表达 式 的 赋值 和 运算 符 的 定义 以 及 数值 的 定义 域 是 
有 关联 的 。 


a 


网 页 设计 与 网 站 建设 
案例 课堂 ~ 


16.6.1 案例 15 一 一 赋值 表达 式 


在 JavaScript 中 ， 赋 值 表达 式 的 一 般 语 法 形式 为 “变量 赋值 运算 符 表达 式 ”， 在 计算 过 
程 中 是 按照 自 右 而 左 结合 的 。 其 中 有 简单 的 赋值 表达 式 ， 如 二 1; 也 有 定义 变量 时 ， 给 变量 赋 
初始 值 的 赋值 表达 式 ， 如 var st="Happy World! "; 还 有 使 用 比较 复杂 的 赋值 运算 符 连接 的 赋 
值 表达 式 ， 如 k+=18。 

【 例 16.20】 赋值 表达 式 的 用 法 (实例 文件 :ch16\16.20.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<tit1le> 赋 值 表达 式 </title> 

<body> 

<script language="javascript"> 

和 

var x = 15; 

document .write ("<p> 目 前 变量 x 的 值 为 : x="+ x); 

K+=X—=X*X? 

document .write ("<p> 执 行 语句 “x+=x-=x*x” 后 ， 变 量 x 的 值 为 : x="+ x); 
var y = 15; 

document .write ("<p> 目 前 变量 y 的 值 为 : y="+ y); 

y+=(y-=y*y); 

document .write ("<p> 执 行 语句 “y+= (y-=y*y) ”后 ， 变 量 y 的 值 为 : y=" +y); 
亿 ==> 

</script> 

</body> 

</head> 

</html> 


在 上 述 代 码 中 ， 表 达 式 x+=x-=x*x 的 运算 流程 如 下 : 先 计 算 x=x-(x*x)， 得 到 x=-210， 
再 计算 x=x+(x-=x*x)， 得 到 x=-195。 同 理 ， 表 达 式 “y+=(y-=y*y)” 的 结果 为 x=-195， 如 
图 16-22 所 示 。 
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目前 变量 x 的 值 为 : x=15 

执行 语句 “x*=x-=x#x” 后 ， 变 量 x 的 信 为 : x=-195 
目前 变量 vy 的 值 为 y=15 

执行 语句 “y+=(y-=y#y) ”后 ， 变 量 y 的 值 为 : y=-195 


16-22 ”程序 运行 结果 


| 由 于 运算 符 的 优先 级 规定 较 多 并 且 容易 混淆 ， 为 提高 程序 的 可 读 性 ， 在 使 用 多 操 
作 符 的 运算 时 ， 尽 量 使 用 括号 “0” 来 保证 程序 的 正常 运行 。 
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16.6.2 ”案例 16 一 一 算术 表达 式 


算术 表达 式 就 是 用 算术 运算 符 连接 的 JavaScript 语句 。 如 itj+k、20-x、a*b、j/k、sum%2 
等 即 为 合法 的 算术 表达 式 。 算 术 运 算 符 的 两 边 必须 都 是 数值 ， 若 在 “+” 运 算 中 存在 字符 或 字 
符 串 ， 则 该 表达 式 将 是 字符 串 表 达 式 ， 因 为 JavaScript 会 自动 将 数值 型 数据 转换 成 字符 串 型 数 
据 。 例 如 ，“" 好 好 学 习 "+it" 天 天 向 上 "I” 表 达 式 将 被 看 作 是 字符 串 表达 式 。 


16.6.3 ”案例 17 一 一 布尔 表达 式 


布尔 表达 式 一 般 用 来 判断 某 个 条 件 或 者 表达 式 是 否 成 立 ， 其 结果 只 能 为 tue 或 false。 
【 例 16.21】 布尔 表达 式 的 用 法 (实例 文件 : ch16\16.21.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 布 尔 表达 式 </title> 
<body> 
<script language="javascript" type="text/javascript"> 
一 
function checkYear () 
{ 
Var txtYearObj = document .all.txtYear; // 文 本 框 对 象 
Var txtYear = txtYearObj.value; 
if((txtYear == null) || (txtYear.length < 1)|| (txtYear < 0)) 
{ // 文 本 框 值 为 空 
window.alert (" 请 在 文本 框 中 输入 正确 的 年 份 ! ") ; 
txtYearObj .focus () ? 
return; 
} 
if(isNaN (txtYear)) 
{ // 用 户 输入 不 是 数字 
window.alert ("年 份 必须 为 整 型 数字 ! ") ; 
txtYearObj .focus () 
return; 
} 
if(isLeapYear (txtYear)) 
window.alert (txtYear + "年 是 闽 年 ! "); 
alae 
window.alert (txtYear + "年 不 是 闽 年 ! ") ; 
function isLeapYear (yearVal) //* 判 断 是 否 闽 年 
{ 
if((yearVal % 100 == 0) && (yearVal % 400 == 0)) 
return true; 
if(yearVal % 4 == 0) return true; 
return false; 
3 
> 
</script> 
<form action="#" name="frmYear"> 
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请 输入 当前 年 份 : 
<input type="text" name="txtYear"> 
<p> 请 单 击 按钮 以 判断 是 否 为 半年 : 
<input type="button" value=" 按 钮 " Onclick="checkYear () "> 
</form> 
</body> 
</head> 
</html> 


在 以 上 代码 中 多 次 使 用 布尔 表达 式 进行 数值 的 判断 。 运 行 该 段 代码 ， 在 显示 的 文本 框 中 
输入 2010， 单 击 【 确 定 】 按 钮 后 ， 系 统 先 判断 文本 框 是 否 为 定 ， 再 判断 文本 框 输入 的 数值 是 
和 否 合法 ， 最 后 判断 其 是 否 为 国 年 并 弹出 相应 的 提示 对 话 框 ， 如 图 16-23 所 示 。 

同 理 ， 如 果 输 入 值 为 2012， 有 具体 的 显示 效果 如 图 16-24 所 示 。 
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请 输入 当前 年 份 。 5 | 请 输入 当前 年 份 。 5355 


请 单 击 护 钮 以 判断 是 否 为 半年 : 国 加 请 单 击 技 租 以 判断 是 否 为 闫 年 区 加 


图 16-23 输入 2010 的 程序 运行 结果 图 16-24 输入 2012 的 程序 运行 结果 


16.6.4 ”案例 18 一 一 字符 串 表达 式 


字符 串 表达 式 是 操作 字符 串 的 JavaScript 语句 。JavaScript 的 字符 串 表 达 式 只 能 使 用 “+” 
与 “+=” 两 个 字符 串 运 算 符 。 如 果 在 同一 个 表达 式 中 既 有 数字 又 有 字符 串 ， 同 时 还 没有 将 字 
符 串 转换 成 数字 的 方法 ， 则 返回 值 一 定 是 字符 串 型 。 

【 例 16.22】 字符 串 表达 式 的 用 法 (实例 文件 ，ch16\16.22.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 字 符 串 表达 式 </title> 
<body> 
<script language="javascript"> 
ee 
var x = 10; 
document .write ("<p> 目 前 变量 x 的 值 为 : x="+ x); 
X=]1+4+8; 
document .write ("<p> 执 行 语句 “x=1+4+8” 后 ， 变 量 x 的 值 为 : x="+ x); 
document .write ("<p> 此 时 ， 变 量 x 的 数据 类 型 为 : "+ (typeof x)); 
X=1+4+'8"; 
document .write ("<p> 执 行 语句 “x=1+4+'8'” 后 ， 变 量 x 的 值 为 : x="+ x); 
document .write ("<p> 此 时 ， 变 量 x 的 数据 类 型 为 : "+ (typeof x)); 
Dd 


$ 350 


</script> 
</body> 
</head> 
</html> 


运行 上 述 代码 ， 对 于 一 般 表 达 式 “1+4+8”， 将 三 
者 相 加 和 为 13， 而 在 表达 式 “1+4+'8'” 中 ， 表 达 式 按 
照 从 左 至 右 的 运算 顺序 ， 先 计算 数值 1、4 的 和 ， 结 果 
为 5， 再 将 计算 之 后 的 和 转换 成 字符 串 型 ， 与 最 后 的 字 
符 串 连接 ， 最 后 得 到 的 结果 是 字符 串 “58”， 如 图 
16-25 所 示 。 


16.6.5 ”案例 19 一 一 类 型 转换 
相对 于 强 类 型 语言 ，JavaScript 的 变量 没有 预定 类 
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是 前 变量 x 的 入 为 : x=10 
执行 语句 “x=1+4+8” 后 ， 变 量 x 的 什 为 : x=13 
此 时 ， 变 量 x 的 数据 类 型 为: number 


此 时 ， 变 量 * 的 数据 类 型 为 : = 
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型 ， 其 类 型 相应 于 包含 值 的 类 型 。 当 对 不 同类 型 的 值 进行 运算 时 ，JavaScript 解释 器 将 自动 把 
数据 类 型 之 一 改变 (强制 转换 ) 为 男 一 种 数据 类 型 ， 再 执行 相应 运算 。 除 自动 类 型 转换 外 ， 为 避 
免 自动 转换 或 不 转换 产生 的 不 良 后 果 ， 有 时 需要 手动 进行 显 式 的 类 型 转换 ， 此 时 可 利用 
JavaScript 中 提供 的 类 型 转换 工具 ， 如 parseInt0 方 法 和 parseFloat() 方 法 等 。 

【 例 16.23】 字符 串 型 数据 转换 为 逻辑 型 数据 (实例 文件 :ch16\16.23.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 类 型 转换 </title> 
<body> 
<script language="javascript"> 
3 
var x = "happy"; // x 值 为 非 空 字符 串 
i 
{ 


alert ("字符 串 型 变量 x 转换 为 逻辑 型 后 ， 结 果 为 true"); 


} 


else 


{ 
alert ("字符 串 型 变量 x 转换 为 逻辑 型 后 ， 结 果 为 false"); 


} 
人 > 
天 XSCEHRE 
</body> 
</head> 
</html> 


代码 运行 结果 如 图 16-26 所 示 。 对 于 非 空 字符 串 变量 x， 按 照 数据 类 型 转换 规则 ， 自 动 转 


换 为 逻辑 型 后 结果 为 true。 
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(==) 


16-26 ”程序 运行 结果 


16.7 ”实战 演练 一 一 一 个 简单 的 JavaScript 实例 


本 例 是 一 个 简单 的 JavaScript 程序 ， 主 要 用 来 说 明 如 何 编写 JavaScript 程序 以 及 在 HTML 
中 如 何 使 用 。 本 例 主要 实现 的 功能 为 : 当 页 面 打 开 时 ， 显 示 “ 尊 敬 的 客户 ， 欢 迎 您 光临 本 网 
NS 站” 窗口， 关闭 页 面 时 弹出 窗口 “欢迎 下 次 光临 ! ”。 程 序 效果 分 别 如 图 16-27 和 图 16-28 
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图 16-27 页面 加 载 时 效果 图 16-28 页面 关闭 时 效果 


具体 操作 步骤 如 下 。 
EEIDp 新 建 HIML 文档 ， 输 入 以 下 代码 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 第 一 个 Javascript 程序 </title> 
</head> 
<body> 
</body> 
</html> 
保存 HTML 文件 ， 选 择 相应 的 保存 位 置 ， 文 件 名 为 welcome.html。 
在 HTML 文档 的 head 部 分 ， 输 入 如 下 代码 。 
<script> 
<script> 
/ /页面 加 载 时 执行 的 函数 
function showEnter(){ 


alert ("尊敬 的 客户 ， 欢 迎 您 光临 本 网 站 ") ; 
和 
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// 页 面 关闭 时 执行 的 函数 


function showLeave(){ 


alert ("欢迎 下 次 光临 ! ") ; 
} 
// 页 面 加 载 事件 触发 时 调用 函数 


window.onload=showEnter; 

// 页 面 关 闭 事件 触发 时 调用 函数 

window.onbeforeunload=showLeave; 
</script> 


EZ 保存 网 页 ， 浏 览 最 终 效果 。 


16.8 ” 跟 我 练 练 手 


16.8.1 练习 目标 
E 够 熟练 掌握 本 章 所 讲 内 容 。 


16.8.2 上 机 练习 


练习 1: 编写 JavaScript 程序 ， 熟 悉 JavaScript 的 基本 语法 及 数据 结构 。 
练习 2: 在 JavaScript 程序 中 使 用 JavaScript 的 数据 类 型 。 

练习 3: 在 JavaScript 程序 中 使 用 JavaScript 运算 符 。 

练习 4: 在 JavaScript 程序 中 使 用 JavaScript 表达 式 。 


16.9 高 手 甜 点 


甜点 1: 变量 名 有 哪些 命名 规则 


变量 名 以 字母 、 下 划 线 或 美元 符号 ($) 开 头 。 例 如 ，txtName 与 _txtName 都 是 合法 的 变量 
名 ， 而 1txtName 和 &txtName 都 是 非法 的 变量 名 。 变 量 名 只 能 由 字母 、 数 字 、 下 划 线 和 美元 
符号 ($) 组 成 ， 其 中 不 能 包含 标点 与 运算 符 ， 也 不 能 用 汉字 做 变量 名 。 例 如 ，txt%oName、 名 称 
文本 、txt-Name 都 是 非法 变量 名 。 不 能 用 JavaScript 保留 字 做 变量 名 。 例 如 ，var、enum、 
const 都 是 非法 变量 名 。JavaScript 对 大 小 写 敏感 。 例 如 ， 变 量 txtName 与 txtname 是 两 个 不 同 
的 变量 ， 两 个 变量 不 能 混用 。 

甜点 2: 声明 变量 有 哪些 规则 


可 以 使 用 一 个 关键 字 var 同时 声明 多 个 变量 ， 如 语句 “var x,y;” 就 同时 声明 了 x 和 y 两 
个 变量 。 可 以 在 声明 变量 的 同时 对 其 赋值 ( 称 为 初始 化 )， 如 “var president = "henan";var 
x=5,y=12;” 声 明了 3 个 变量 president、x 和 y， 并 分 别 对 其 进行 了 初始 化 。 如 果 出 现 重复 声明 
的 变量 ， 且 该 变量 已 有 一 个 初始 值 ， 则 此 时 的 声明 相当 于 对 变量 的 重新 赋值 。 如 果 只 是 声明 
了 变量 ， 并 未 对 其 赋值 ， 其 值 默认 为 undefined。var 语句 可 以 用 作 for 循环 和 for/in 循环 的 一 
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部 分 ， 这 样 可 使 得 循环 变量 的 声明 成 为 循环 语法 自身 的 一 部 分 ， 使 用 起 来 较为 方便 。 
甜点 3: 比较 运算 符 “==” 与 赋值 运算 符 “=” 有 什么 不 同 


在 各 种 运算 符 中 ， 比 较 运 算 符 “一 ”与 赋值 运算 符 “=” 完 全 不 同 ， 赋 值 运算 符 “=” 是 
用 于 给 操作 数 赋值 ;而 比较 运算 符 “ 一 ” 则 是 用 于 比较 两 个 操作 数 的 值 是 否 相 等 。 如 果 在 需 
要 比较 两 个 表达 式 的 值 是 否 相等 的 情况 下 ， 错 误 的 使 用 赋值 运算 符 “=”， 则 会 将 右 操作 数 的 
值 赋 给 左 操作 数 。 


~ 


SA 
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JavaScript 编程 中 
continue、break 来 完成 的 ， 其 中 条 件 判 断 按 预先 设 定 的 条 件 执行 程序 ， 包 括 证 语句 


对 程序 流程 的 控制 主要 是 通过 条 件 判断 、 循 环 控 骨 


和 知名; 而 循环 控制 语句 则 可 以 重复 完成 任务 ， 和 包 # 


和 switch 语句 ; 
语句 及 for 语句 。 


本 章 将 主要 讲述 JavaScript 的 程序 控 


语句 及 
这 语 名 


， 包 括 while 语句 、do...while 
制 结构 与 相关 的 语句 。 
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17.1 赋值 语句 


赋值 语句 是 JavaScript 程序 中 最 常用 的 语句 。 在 程序 中 ， 往 往 需 要 大 量 的 变量 来 存储 程序 
中 用 到 的 数据 ， 所 以 用 来 对 变量 进行 赋值 的 赋值 语句 也 会 在 程序 中 大 量 出 现 。 赋 值 语句 的 语 
法 格式 如 下 。 

变量 名 = 表达 式 


当 使 用 关键 字 var 声明 变量 时 ， 可 以 同时 使 用 赋值 语句 对 声明 的 变量 进行 赋值 。 
例如 ， 声 明 一 些 变量 ， 并 分 别 给 这 些 变 量 赋值 ， 代 码 如 下 。 


Var username="Rose" 
Var bue=true 


var variable=" 开 怀 大 笑 ， 益 寿 延 年 " 


17.2 条 件 判断 语句 


条 件 判断 语句 用 于 对 语句 中 不 同 条 件 的 值 进 行 判断 ， 进 而 根据 不 同 的 条 件 执行 不 同 的 语 
句 。 条 件 判断 语句 主要 包括 两 大 类 ， 分 别 是 : 站 判 断 语 句 和 switch 多 分 支 语句 。 


17.2.1 ”案例 1= 放 语句 


让 语句 是 使 用 最 为 普遍 的 条 件 选择 语句 ， 每 一 种 编程 语言 都 有 一 种 或 多 种 形式 的 计 语 
句 ， 在 编程 中 它 是 经 常 被 用 到 的 。 

下 语句 的 格式 如 下 。 

if (条 件 语句 ) 

| 执行 语句 ; 

} 

其 中 的 “条 件 语句 ”可 以 是 任何 一 种 逻辑 表达 式 ， 如 果 “ 条 件 语 句 ” 的 返回 结果 为 
true， 则 程序 先 执行 后 面 大 括号 对 中 的 “执行 语句 ”， 然 后 执行 它 后 面 的 其 他 语句 。 如 果 “ 条 
件 语句 ”的 返回 结果 为 false， 则 程序 跳 过 “条 件 语句 ”后 面 的 “执行 语句 ”， 直 接 去 执行 程 
序 后 面 的 其 他 语句 。 大 括号 的 作用 就 是 将 多 条 语句 组 合成 一 个 复合 语句 ， 作 为 一 个 整体 来 处 
理 ， 如 果 大 括号 中 只 有 一 条 语句 ， 这 对 大 括号 对 可 以 省 略 。 

【 例 17.1】 让 语句 的 使 用 (实例 文件 :ch17\17.1.html)。 


<!DOCTYPE html> 

<html> 

<body> 

<p> 如 果 时 间 早 于 20 : 00， 会 获得 问候 "Good day"。</p> 
<button onclick="myFunction() "> 点 击 这 里 </button> 
<p id="demo"></p> 

<script type="text/javascript"> 


$ 356 


function myFunction() 
;| 
Var X=""; 
var time=new Date() .getHours(); 
if (time<20) 
: 
X="Good day"7 
document .getElementById ( "demo") .innerHTML=x; 
</script> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 17-1 所 示 。 单 击 页 面 中 的 【点 击 这 里 】 按 钮 ， 可 以 看 到 按钮 下 
方 显示 出 Good day 问候 语 ， 如 图 17-2 所 示 。 


站 wserswdminitt P OX | Hveer eminier., 
文 4() 所 吉日。 本 看 VM) 扩大 (A) 工具 TT 车 拘 IH) 


如 果 时 间 早 于 20:00， 会 获得 同 收 “Good day”。 
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如 果 时 间 早 于 20:00， 会 获得 问候 “Good dey”。 
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图 17-1 程序 运行 结果 (1) 图 17-2 程序 运行 结果 (2) 
全: 请 使 用 小 写 的 记 ， 如 果 使 用 大 写字 母 (IF) 会 生成 JavaScript 错误 ， 另 外 ， 在 这 个 语 


站 变法 中 没有 else， 因 此 用 户 已 经 告诉 浏览 器 只 有 在 指定 条 件 为 me 时 才 执行 代码 ， 


17.2.2 ”案例 2 一 一 if...else 语句 


f...else 语句 通常 用 于 一 个 条 件 需 要 两 个 程序 分 支 来 执行 的 情况 。 自 ..else 语句 的 语法 格 
式 如 下 。 


if (条 件 ) 
{ 
当 条 件 为 true 时 执行 的 代码 
} 
else 
{ 
当 条 件 不 为 true 时 执行 的 代码 
} 
这 种 格式 在 迁 从 句 的 后 面 添加 一 个 else 从 句 ， 这 样 当 条 件 语 句 返回 结果 为 false 时 ， 执 行 
else 后 面 的 从 句 。 
【 例 17.2】 让 ..else 语句 的 使 用 (实例 文件 : ch17\17.2.htmD) 。 
<html> 
<head> 


<script type="text/javascript"> 


asssasa 韦 儿 车 和 


对 邳 趾 车 瞧 址 沿 沿 前 


GG 


是 加 


7®@ 


信 358 


网 页 设计 与 网 站 建设 


案例 课堂 ~ 


Var a="john"; 
if(a!="john") 
{ 
document .write("<hl1 style='text-align:center;color:red;' > 欢 
迎 JOHN 光临 </h1>"); 
} 
elsef{ 
document .write("<p style='font-size:l15px;font— 
weight :bolder; color:blue'> 请 重新 输入 名 称 </p>"); 
} 
</script> 
</head> 
<body> 
</body> 
</html> 


上 面 代码 中 使 用 站 .else 语句 对 变量 a 的 值 进行 判 


断 ， 如 果 a 的 值 不 等 于 jobn 则 输出 红色 标题 ， 否 则 输出 。 | esa Dex| Gwe 
蓝 色 信息 。 请 重新 输入 名 称 


出 了 蓝 色 信 息 “请 重新 输入 名 称 ”。 


在 正 9.0 中 浏览 效果 如 图 17-3 所 示 ， 可 以 看 到 网 页 输 


17-3 if...else 语句 判断 


17.2.3 ”案例 3 一 一 if...else if 语句 


使 用 让..else 让 语句 可 以 选择 多 个 代码 块 之 一 来 执行 。 直 ..else 站 语句 的 语法 格式 如 下 。 
if (条 件 1) 


E 
当 条 件 1 为 true 时 执行 的 代码 
1 

else if (条 件 2) 
{ 
当 条 件 2 为 true 时 执行 的 代码 
} 


else 


{ 
当 条 件 1 和 条 件 2 都 不 为 true 时 执行 的 代码 
} 


【 例 17.3】 使 用 还 ..else 直 语句 输出 问候 语 ( 实 例文 件 ，ch17\17.3.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<p> if...else if 语句 的 使 用 </p> 
<script type="text/javascript"> 
Var d = new Date() 
Var time = d.getHours () 
IE (time<10){ 
document .write ("<b>Good morning</b>")} 
else if (time>=10 && time<16) 
{document .write ("<b>Good day</b>") } 
else{document .write("<b>Hello World!</b>")} 


@s 

第 

</script> i 

</body> > 
</html> 

| 

在 正 9.0 中 浏览 效果 如 图 17-4 所 示 。 变 

(DOD ecverns s+ ox 合 HUsersAdministr,. * 外 

四 ~ 文件 ”大 雪 {E) 。 豆 看 (V) 浆 荣 夫 (A) 工具 [D) 寿 动 (H) | 

17.2.4 案例 4 一 if 语句 的 谋 套 站 

让 语句 可 以 嵌 套 使 用 。 当 过 语句 的 从 句 部 分 大 | 向 

括号 中 的 部 分 ) 是 另外 一 个 完整 的 让 语句 时 ， 外 层 让 

语句 的 从 名 部 分 的 “{} ”可 以 省 略 。 但 是 ， 在 使 用 

让 语句 的 嵌 套 应 用 时 ， 最 好 使 用 “{}” 来 确定 相互 a 抬 

的 层次 关系 。 否则， 由 于 大 括号 “了 {} ”使 用 位 置 的 不 同 ， 可 能 导致 程序 代码 的 含义 完全 不 。 入 

同 ， 从 而 输出 不 同 的 结果 。 例 如 下 面 的 两 个 实例 ， 由 于 大 括号 “全 ”的 不 同 ， 其 输出 结果 也 。 乌 

是 不 同 的 。 名 


【 例 17.4】 让 语句 的 嵌 套 (实例 文件 : ch17\17.4.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<script type="text/javascript"> 
var x=20;y=x; //x、y 值 都 为 20 
if (x<1) //z 为 20, 不 满足 此 条 件 ， 故 其 下 面 的 代码 不 会 执行 
t 
if (y==5) 
alert ("x<l&&y==5"); 
else 
alert ("x<l&&y!==5"); 


else if(x>15) //x 满 足 条 件 ， 继 续 执行 下 面 的 语句 
if (y==5) //Y 为 20, 不 满足 此 条 件 ， 故 其 下 面 的 代码 不 会 执行 


alert ("x>15&&y==5"); 
else //Y 满足 条 件 ， 继 续 执 行 下 面 的 语句 
alert ("x>l5&&y!==5"); // 这 里 是 程序 输出 的 结果 
} 
</script> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 17-5 所 示 。 
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图 17-5 程序 运行 结果 
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【 例 17.5】 调整 嵌 套 语句 中 的 大 括号 位 置 (实例 文件 : ch17\17.5.htmD) 。 


<!DOCTYPE html> 
<html> 
<body> 
<script type="text/javascript"> 
Var x=20;y=x; //x、y 值 都 为 20 
if (x<1) //z 为 20, 不 满足 此 条 件 , 故 其 下 面 的 代码 不 会 执行 


if(y=—=5) 

alert ("x<l&&y==5"); 
else 

alert ("x<l&&y!==5"); 


else if(x>15) //x 满足 条 件 , 继续 执行 下 面 的 语句 
lt //Y 为 20, 不 满足 此 条 件 , 故 其 下 面 的 代码 不 会 执行 


aleLrt("X>15&&Y==5") 7 
上 
else //zx 已 满足 前 面 的 条 件 , 这 里 的 语句 不 会 被 执行 
alert ("x>50&&y!==1"); CR 故 没 有 可 执行 的 语句 , 也 就 没有 输出 
果 


</script> 
</body> 
</html> 
运行 该 程序 ， 则 不 会 出 现任 何 结果 ， 如 图 17-6 所 [RE 
示 。 可 以 看 出 ， 只 是 由 于 “{}” 使 用 位 置 的 不 同 ， 造 成 ”| 局 eV em Im 
了 程序 代码 含义 的 完全 不 同 。 因 此 ， 在 嵌 套 使 用 时 ， 最 
好 使 用 “{}” 来 明确 程序 代码 的 层次 关系 。 


17.2.5 ”案例 5 一 一 switch 语句 


switch 选择 语句 用 于 将 一 个 表达 式 的 结果 同 多 个 值 进 行 比较 ， 并 根据 比较 结果 选择 执行 
语句 。Switch 语句 的 语法 格式 如 下 。 


switch (表达 式 ) 
{ 


17-6 “程序 运行 结果 


case 取 值 1 : 
语句 块 1; break; 
case 取 值 2 
语句 块 2; break;: 
case 取 值 n; 
语句 块 n;break; 
default : 
语句 块 n+17 
了 


case 语句 只 是 相当 于 定义 一 个 标记 位 置 ， 程 序 根据 switch 条 件 表达 式 的 结果 ， 直 接 跳 转 
到 第 一 个 匹配 的 标记 位 置 处 ， 开 始 顺 序 执行 后 面 的 所 有 程序 代码 ， 包 括 后 面 的 其 他 case 语句 


二 
全 360 


下 的 代码 ， 直 到 碰 到 break 语句 或 函数 返回 语句 为 止 。default 语句 是 可 选 的 ， 它 匹配 上 面 所 有 
的 case 语句 定义 的 值 以 外 的 其 他 值 ， 也 就 是 前 面 所 有 取 值 都 不 满足 时 ， 就 执行 default 后 面 的 
语句 块 。 

【 例 17.6】 应 用 switch 语句 判断 当前 是 星期 几 (实例 文件 : ch17\17.6.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 应 用 switch 判断 当前 是 星期 几 </title> 
<script language="javascript"> 
var now=new Date(); // 获 取 系 统 日 期 
Var day=now.getDay (); // 获 取 星 期 
var week; 
Switch (day){ 
case 1: 
week=" 星 期 一 "; 
break; 
case 2: 
week=" 星 期 二 "; 
break; 
case 3: 
week=" 星 期 三 "; 
break; 
case 4: 
week=" 星 期 四 "; 
break; 
case 5: 
week=" 星 期 五 "; 
break; 
case 6: 
week=" 星 期 六 "; 
break; 
default: 
week=" 星 期 日 "; 


break; 


可 过 守 党 局 前 对 中 一 册 2 小 图 


过 斑 JT 普 中 址 沿 尘 隔 


GZ 


和 

document .write ("今天 是 "+week); // 输 出 中 文 的 星期 
</script> 

</head> 

<body> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 17-7 所 示 。 可 以 看 到 在 页 面 中 显示 了 当前 是 星期 几 。 
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图 17-7 ”程序 运行 结果 


31@ 


网 页 设计 与 网 站 建设 
案例 课堂 ~ 


pr 在 程序 开发 的 过 程 中， 要 根据 实际 情况 选择 是 使 用 让 语句 还 是 switch 语句 ， 不 要 

半 因为 switch 语句 的 效率 高 而 一 味 地 使 用 ， 也 不 要 因为 证 语句 常用 而 不 使 用 switch 语 
句 。 一 般 情况 下 ， 对 于 判断 条 件 较 少 的 可 以 使 用 这 语句 ， 但 是 要 实现 多 条 件 判断 时 ， 
就 应 该 使 用 switch 语句 。 


17.3 ”循环 控制 语句 


顾名思义 ， 循 环 控制 语句 主要 用 于 在 满足 条 件 的 情况 下 反复 执行 某 一 个 操作 ， 循 环 控制 
语句 主要 包括 while 语句 、do...while 语句 和 for 语句 。 


17.3.1 案例 6 一 一 while 语句 


while 语句 是 循环 语句 ， 也 是 条 件 判 断 语 句 。while 语句 的 语法 格式 如 下 。 
while (条 件 表达 式 语句 ) 


{ 
执行 语句 块 
} 


当 “ 条 件 表达 式 语句 ”的 返回 值 为 tue 时 ， 则 执行 大 括号 中 的 语句 块 ， 当 执行 完 大 括号 
中 的 语句 块 后 ， 再 次 检测 条 件 表 达 式 的 返回 值 ， 如 果 返 回 值 还 为 tue， 则 重复 执行 大 括号 中 
的 语句 块 ， 直 到 返回 值 为 false 时 结束 整个 循环 过 程 ， 接 着 往 下 执行 while 代码 段 后 面 的 程序 
代码 。 

【 例 17.7】 计算 1 一 100 的 所 有 整数 之 和 (实例 文件 ，ch17\17.7.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title>while 语句 的 使 用 </title> 
</head> 
<body> 
<script type="text/javascript"> 
Var i=0; 
Var iSum=0; 
while (i<=100) 
{ 
iSumt+=i; 
了 十 十 7 
} 
document .write ("1-100 的 所 有 数 之 和 为 "+isum) ; 
</script> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 17-8 所 示 。 
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图 17-8 “程序 运行 结果 外 
使 用 while 语句 过 程 中 的 注意 事项 如 下 。 程 
e@ ”应 该 使 用 大 括号 包含 多 条 语句 (一 条 语句 也 最 好 使 用 大 括号 )。 
e@ ”在 循环 体 中 应 该 包含 使 循环 退出 的 语句 ， 比 如 上 例 中 的 i++( 否 则 循环 将 无 休止 地 运 
行 )。 构 
e ”注意 循环 体 中 语句 的 顺序 ， 比 如 上 例 中 ， 如 果 改 变 “iSum+=i; ”与 “i+t+;” 语 句 的 顺 | NN 
序 ， 结 果 将 完全 不 一 样 。 名 SS 


@¥ 不 要 忘记 增加 条 件 中 所 用 变量 的 值 ， 如 果 不 增加 变量 的 值 ， 该 循环 永远 不 会 结 


背 尖 来。 可 能 会 下 训 蜂 商 六 NN 


17.3.2 ”案例 7 一 一 do...while 语句 


do...while 语句 的 功能 和 while 语句 差不多 ， 只 不 过 它 是 在 执行 完 第 一 次 循环 之 后 才 检测 
条 件 表达 式 的 值 ， 这 意味 着 包含 在 大 括号 中 的 代码 块 至 少 要 被 执行 一 次 ， 另 外 ，do while 语句 
结尾 处 的 while 条 件 语句 的 括号 后 有 一 个 分 号 “;”， 该 分 号 一 定 不 能 省 略 。 

do...while 语句 的 语法 格式 如 下 。 


do 


执行 语句 块 
}while (条 件 表达 式 语句 ) ; 


【 例 17.8】 计算 1~100 的 所 有 整数 之 和 (实例 文件 ，ch17\17.8.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title>Javascript do.. .while 语句 示例 </title> 
</head> 
<body> 
<script type="text/javascript"> 
Var i=0; 
Var iSsum=0; 
do 
: | 
iSumt=i; | 
++? | 
}while (i<=100) 
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document .write("1-100 的 所 有 数 之 和 为 "+iSum) 7 


</script> 
</body> 
</html> 
在 正 9.0 中 浏览 效果 如 图 17-9 所 示 。 
由 实例 可 知 、while 与 do...while 的 区 别 如 下 。 全 全 Eee 至 ! 


(1) do.while 将 先 执行 一 遍 大 括号 中 的 语句 ， 再 判断 。 | -maps 
表达 式 的 真 假 。 这 是 它 与 while 的 本 质 区 别 。 

(2) do...while 与 while 是 可 以 相互 转化 的 。 

上 面 的 例子 中 如 果 i 的 初始 值 大 于 100，iSum 的 值 将 
不 同 于 示例 ， 这 就 是 由 于 do _while 语句 先 执行 了 循环 体 国 ， 9 息 局 友和 归 归 
语句 的 缘故 。 


17.3.3 ”案例 8 一 一 for 语句 


for 语句 通常 由 两 个 部 分 组 成 ， 一 部 分 是 条 件 控制 部 分 ， 男 一 部 分 是 循环 部 分 。for 语句 
的 语法 格式 如 下 。 
for (初始 化 表达 式 ; 循环 条 件 表达 式 ;循环 后 的 操作 表达 式 ) 
{ 
执行 语句 块 
3} 


在 使 用 for 循环 前 要 先 设 定 一 个 计数 器 变量 ， 可 以 在 for 循环 之 前 预先 定义 ， 也 可 以 在 使 
用 时 直接 进行 定义 。 在 上 述 语 法 格式 中 ，“ 初 始 化 表达 式 ” 表 示 计 数 器 变量 的 初始 值 ，“ 循 
环 条 件 表 达 式 ”是 一 个 计数 器 变量 的 表达 式 ， 决 定 了 计数 器 的 最 大 值 ， “循环 后 的 操作 表达 
式 ” 表 示 循 环 的 步 长 ， 也 就 是 每 循环 一 次 ， 计 数 器 变量 值 的 变化 ， 该 变化 可 以 是 增 大 的 ， 也 
可 以 是 减 小 的 ， 或 进行 其 他 运算 。for 循环 是 可 以 嵌 套 的 ， 也 就 是 在 一 个 循环 里 还 可 以 有 另 一 
个 循环 。 

【 例 17.9】 ”for 循环 语句 的 使 用 (实例 文件 :ch17\17.9.htmD)。 


<!DOCTYPE html> 
<html> 
<head> 

<script type="text/javascript"> 

for (Var i=0;i<5;i++){ 
document .write("<p style='font-size:"+i+"0px'> 欢 迎 学 习 
javascript</p>"); 
} 

</script> 
</head> 
<body> 
</body> 
</html> 


上 面 的 代码 中 ， 使 用 for 循环 输出 了 不 同 字体 大 小 的 语句 。 在 正 9.0 中 浏览 效果 如 图 17-10 


ee 


欢迎 学 习 javascript 


欢迎 学 习 javascript 
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17-10 for 循环 的 应 用 


17.4 跳 转 语 铝 


JavaScript 支持 的 跳 转 语句 主要 有 continue 语句 和 break 语句 。continue 语句 与 break 语句 
的 主要 区 别 是 : break 是 彻底 结束 循环 ， 而 continue 是 结束 本 次 循环 。 


17.4.1 案例 9 一 一 break 语句 N 


break 语句 用 于 退出 包含 在 最 内 层 的 循环 或 者 退出 一 个 switch 语句 。break 语句 通常 用 在 
for、while、do...while 或 switch 语句 当中 。break 语句 的 语法 格式 如 下 。 


break; 


【 例 17.10】 break 语句 的 使 用 : 在 Ihave a dream 字符 串 中 找到 第 一 个 d 的 位 置 (实例 文 
件 ，chl7\17.10.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
Var sUrl = "I have a dream"; 
var iLength = sUrl.length; 
Var iPos = 0; 
for (Var i=0;i<iLength;i++) 
{ 
if (sUrl.charAt (i)=="d") // 判 断 表达 式 2 
{ 


本末 朵 普 器 悍 扩 沁 陪 


iPos=i+17 
break; 
} 
} 
document .write ("字符 串 "+sUrl+" 中 的 第 一 个 a 字母 的 位 置 为 "+iPos); 
</script> E 
</head> 过 5 Mserevmnt P- CxS ee 中 


<body> | 2 | EBV BN IRM So 
字符 曲 I hsve a dress 中 的 第 一 个 d 字 生 的 位 置 为 10 


</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 17-11 所 示 ， 运 行 结果 为 : 字 


符 串 TIhave a dream 中 的 第 一 个 d 字母 的 位 置 为 10。 17-11 “break 语句 的 应 用 L 
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17.4.2 ”案例 10 一 一 continue 语句 


continue 语句 和 break 语句 类 似 ， 不 同 之 处 在 于 ，continue 语句 用 于 中 止 本 次 循环 ， 并 开 
始 下 一 次 循环 ， 其 语法 格式 如 下 。 


continue; 


m7 

站 注 

意 

【 例 17.11】 ”continue 语句 的 使 用 : 打印 出 i have a dream 字符 串 中 小 于 字母 d 的 字符 
(实例 文件 : ch17\17.11.htnl)。 


<!DOCTYPE html> 


continue 语句 只 能 用 在 while、for、do.…while 和 switch 语句 当中 。 


<html> 

<head> 
<script type="text/javascript"> 
var sUrl = "i have a dream"; 


Var iLength = sUrl.length; 
var iCount = 0; 
for (Var i=0;i<iLength;i++) 
{ 
if(sUrl.charat (i)>="d") // 判 断 表 达 式 2 
{ 
continue; 
} 
document .write(sUrl.charAt (i)); 
} 
</script> 

</head> 

<body> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 17-12 所 示 。 
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图 17-12 ”continue 语句 的 使 用 


17.5 “实战 演练 一 一 在 页 面 中 显示 距离 2016 年 元 旦 节 的 天 数 


学 习 了 JavaScript 中 的 基本 语句 之 后 ， 即 可 实现 多 态 效果 。 本 实例 就 通过 JavaScript 实现 
在 页 面 中 显示 距离 2016 年 元 旦 的 天 数 。 
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具体 的 操作 步骤 如 下 。 
ED 定义 Javaseript 的 函数 ， 实 现 判断 系统 当前 时 间 与 2016 年 元 旦 相距 的 天 数 ， 代 
码 如 下 。 


function Countdown (title,Intime,divIid){ 


var online= new Date (Intime); // 根 据 参数 定义 时 间 对 象 
var now = new Date(); // 定 义 当前 系统 时 间 对 象 
var leave = online.getTime() - now.getTime(); // 计 算 时 间 差 


可 斗 站 并 沼 前 立 汇 山 外 名 鲁 


var day = Math.floor(leave / (1000 * 60 * 60 * 24))+17 
if (day > 1){ 


if(document.all){ 程 
divId.innerHTML="<b> 一 一 距 "+ title+" 还 有 "+day +" 天 ! </b>"; 序 
// 页 面 显 示 信息 控 
} 制 
jelsef 
if (day == 1) { 与 
if(document.all){ 语 
divId.innerHTML="<b> 一 一 明天 就 是 "+title+" 啦 !1</b>"; 旬 NN 
} 
jelset SS 
if (day == 0) {divId.innerHTML="<b> 今 天 就 是 "+title+" 呀 ! </b>"; 
jelsef 


if(document .al1)1{ 
divId.innerHTML="<b> 一 一 唉 呀 ! "+title+" 已 经 过 了 ! </b>"; 
} 
} 


} 
在 页 面 中 定义 相关 表格 ， 用 于 显示 当前 时 间距 离 2016 年 元 旦 的 天 数 。 


<table width="350" height="450" border="0" align="center" cellpadding=" 
cellspacing="0"> 
<tr> 
<td valign="bottom" ><table width="346" height="418" border="0" 
cellpadding="0" cellspacing="0"> 
<tr> 
<td width="76"> </td> 
<td width="270"> 
<div id="countDown"> 
<b>—</b></div> 
<script language="javascript"> 
countdown ("2016 年 元 旦 ","1/1/2015", countDown); <!-- 调 


用 Javascript 函数 --> 


</script> 
</td> 
</ER> 
</table></td> 
<LEES 
</table> 


葬 于 E>》 运行 相关 程序 ， 即 可 得 出 最 终 的 效果 ， 如 图 17-13 所 示 。 
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图 17-13 ”程序 运行 结果 


17.6 ” 跟 我 练 练 手 


17.6.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 


17.6.2 上 机 练习 


练习 1: 在 JavaScript 程序 中 使 用 赋值 语句 。 
练习 2: 在 JavaScript 程序 中 使 用 条 件 判断 语句 。 
练习 3: 在 JavaScript 程序 中 使 用 循环 控制 语句 。 
练习 4: 在 JavaScript 程序 中 使 用 跳 转 语句 。 


17.7 高 手 甜 点 


甜点 1: 为 什么 会 出 现 死 循环 


在 使 用 for 语句 时 ， 需 要 保证 循环 可 以 正常 结束 ， 也 就 是 保证 循环 条 件 的 结果 存在 为 
false 的 情况 ， 和 否则 循环 体会 无 限 地 执行 下 去 ， 从 而 出 现 死 循环 的 现象 。 例 如 下 面 的 代码 : 


for (i=2;i>=2;i++) 


alert (i); 


甜点 2: 如 何 计算 200 以 内 所 有 村 数 的 和 
使 用 for 语句 可 以 解决 计算 奇数 和 的 问题 ， 代 码 如 下 。 


<script type="text/javascript"> 
var sum=0; 
for (i=1;i<200;i=i+2) 


sum=sum+i; 


} 
alert (“200 以 内 所 有 奇数 的 和 为 : “+sum) ; 


JavaScript 中 函数 的 使 用 方法 。 
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18.1 函数 简介 


在 程序 设计 中 ， 可 以 将 一 段 经 常 使 用 的 代码 “封装 ”起 来 ， 在 需要 时 直接 调用 ， 这 种 
“封装 ” 称 为 函数 。JavaScript 中 可 以 使 用 函数 来 响应 网 页 中 的 事件 。 函 数 有 很 多 种 分 类 方 
法 ， 常 用 的 分 类 方法 如 下 。 
@ ” 按 参 数 个 数 划 分 ， 包 括 有 参数 函数 和 无 参数 函数 。 
@ ” 按 返 回 值 划 分 ， 包括 有 返回 值 函 数 和 无 返回 值 函数 。 
e。 按 编写 函数 的 对 象 划分 ， 包 括 预 定义 函数 (系统 函数 ]) 和 自 定 义 函 数 。 
函数 具有 以 下 几 个 优点 。 
@ ”代码 灵活 性 较 强 。 通 过 传递 不 同 的 参数 ， 可 以 让 函数 的 应 用 更 广泛 。 例 如 ， 在 对 两 
个 数据 进行 运算 时 ， 运 算 结 果 取决 于 运算 符 ， 如 果 把 运算 符 当 作 参 数 ， 那 么 不 同 的 
用 户 在 使 用 函数 时 ， 只 需要 给 定 不 同 的 运算 符 ， 都 能 得 到 自己 想 要 的 结果 。 

@ “代码 利用 性 强 。 函 数 一 旦 定义 ， 任 何 地 方 都 可 以 调用 ， 而 无 须 再 次 编写 。 

e “响应 网 页 事件 。JavaScript 中 的 事件 模型 主要 通过 函数 和 事件 的 配合 使 用 来 实现 。 


18.2 ”函数 的 调用 


定义 函数 的 目的 是 在 后 续 的 代码 中 使 用 函数 。 调 用 自己 不 会 执行 ， 必 须 调用 函数 ， 函 数 
体内 的 代码 才 会 执行 。 在 JavaScript 中 调用 函数 的 方法 有 简单 调用 、 在 表达 式 中 调用 、 在 事件 
响应 中 调用 等 。 


18.2.1 案例 1 一 一 函数 的 简单 调用 


函数 的 简单 调用 也 被 称 为 直接 调用 ， 该 方法 一 般 比 较 适 合 没有 返回 值 的 函数 。 此 时 相当 
于 执行 函数 中 的 语句 集合 。 直 接 调用 函数 的 语法 格式 如 下 。 

函数 名 ( [ 实 参 1，] ) 

调用 函数 时 的 参数 取决 于 定义 该 函数 时 的 参数 ， 如 果 定 义 时 有 参数 ， 此 时 ， 需 要 增加 


实 参 。 
【 例 18.1】 函数 的 简单 调用 (实例 文件 ，ch18\18.1.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 计 算 一 元 二 次 方程 函数 </title> 
<script type="text/javascript"> 
function calcF (x){ 


var result; // 声 明 变 量 ， 存 储 计 算 结 果 
result=4*x*x+3*Xx+2; // 计 算 一 元 二 次 方程 值 
alert (" 计 算 结 果 : "+result) 7 // 输 出 运算 结果 


亲 晤 


var inValue = prompt (' 请 输入 一 个 数值 : ') 
calcF (inValue); 

</script> 

</head> 

<body> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 18-1 所 示 ， 可 以 看 到 在 加 载 页 面 的 同时 ， 提 示 对 话 框 就 出 现 
了 ， 在 其 中 输入 相关 数值 ， 然 后 单 击 【确定 】 按 钮 ， 即 可 得 出 计算 结果 ， 如 图 18-2 所 示 。 
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图 18-1 函数 的 简单 调用 18-2 显示 计算 结果 NN 


18.2.2 案例 2 一 “在 表达 式 中 调用 函数 RS 


在 表达 式 中 调用 函数 的 方式 ， 一 般 比 较 适合 有 返回 值 的 函数 ， 函 数 的 返回 值 参 与 表达 式 
的 计算 。 通 常 该 方式 还 会 和 输出 (alert、document 等 ) 语 句 配 合 使 用 。 
【 例 18.2】 ”判断 给 定 的 年 份 是 否 为 国 年 (实例 文件 :ch18\18.2.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 在 表达 式 中 调用 函数 </title> 
<script type="text/javascript"> 
// 函 数 isLeapYea 判断 给 定 的 年 份 是 否 为 闽 年 ， 如 果 是 ， 返 回 指定 年 份 为 闽 年 的 字符 串 , 否则 返回 
平年 字符 串 
function isLeapYear (Year) { 
// 判 断 闻 年 的 条 件 
IE (year®4==0&&year%100!=0||year%®%400==0) 
{ 
return Year+" 年 是 闽 年 "; 
了 
else 
下 
return year+" 年 是 平年 "; 
} 


A 


: 

document .write (isLeapYear (2014)); 
</script> 

</head> 

<body> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 18-3 所 示 。 
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18-3 ”判断 是 否 为 闫 年 
18.2.3 ”案例 3 一 一 在 事件 响应 中 调用 函数 


JavaScript 是 基于 事件 模型 的 程序 语言 ， 页 面 加 载 、 用 户 单 击 、 移 动 光 标 都 会 产生 事件 。 
当 事 件 产 生 时 ，JavaScript 可 以 调用 某 个 函数 来 响应 这 个 事件 。 
【 例 18.3】 在 事件 响应 中 调用 函数 (实例 文件 ，ch18\18.3.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 在 事件 响应 中 调用 函数 </title> 
<script type="text/javascript"> 
function showHello() 
1 
Var count=document .myForm.txtCount.value ; // 文 本 框 中 输入 的 显示 次 数 
for (i=0; i<count; i++){ 
document .write ("<H2>HelloWorld</H2>"); // 按 指定 次 数 输出 HelloWorld 
} 


于 

</script> 

</head> 

<body> 

<form name="myForm"> 
<input type="text" name="txtCount" /> 
<input type="submit" name="Submit" value=" 显 示 HelloWorld" 

onClick="showHello()"> 

</form> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 18-4 所 示 ， 在 文本 框 中 输入 显示 HelloWorld 的 次 数 ， 这 里 输 
入 3。 单 击 【 显 示 HelloWorld】 按 钮 ， 即 可 在 页 面 中 看 到 显示 了 3 个 HelloWorld， 如 图 18-5 
所 示 。 


和 6 总" x- ee IRO 
HelloWorld 


HelloWorld 
HelloWorld 


图 18-4 输入 显示 次 数 图 18-5 程序 运行 结果 
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18.2.4 ”案例 4 一 一 通过 链接 调用 函数 


函数 除了 可 以 在 事件 响应 中 调用 外 ， 还 可 以 通过 链接 调用 。 在 <a> 标 签 的 href 标记 中 使 用 
“javascript 关 键 字 ”链接 来 调用 函数 ， 当 用 户 单 击 该 链接 时 ， 相 关 函 数 就 会 被 执行 。 
【 例 18.4】 通过 链接 调用 函数 (实例 文件 ，ch18\18.4.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 通 过 链接 调用 函数 </title> 
<script language="javascript"> 
function test(){ 

alert ("从 零 开始 学 Javascript"); 
3 
</script> 
</head> 
<body> 
<a href="javascript:test (); "> 学 习 JavaScript 的 好 书籍 </a> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 18-6 所 示 ， 单 击 页 面 中 的 超级 链接 ， 即 可 调用 自 定义 的 函数 ， 
如 图 18-7 所 示 。 
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图 18-6 ”通过 链接 调用 函数 图 18-7 ”调用 函数 结果 


18.3 JavaScript 中 常用 的 函数 


在 了 解 了 什么 是 函数 及 函数 的 调用 方法 外 ， 下 面 再 来 介绍 JavaScript 中 常用 的 函数 ， 如 媒 
套 函 数 、 递 归 函 数 、 内 置 函数 等 。 


18.3.1 案例 5 一 一 舱 套 函数 


顾名思义 ， 媒 套 函 数 就 是 在 函数 内 部 再 定义 一 个 函数 。 这 样 定 义 的 优点 在 于 可 以 使 用 内 
部 函数 轻松 获得 外 部 函数 的 参数 及 函数 的 全 局 变量 。 
嵌 套 函数 的 语法 格式 如 下 。 


function 外 部 函数 名 (参数 1, 参数 2) { 
function 内 部 函数 名 () { 
函数 体 
} 


六 图 一 并 遇 否 于 剖 证 ]duoSener 几 8+ 小 站 
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【 例 18.5】 上 嵌 套 函数 的 应 用 (实例 文件 ， ch18\18.5.htm])。 


<!IDOCTYPE html > 

<html> 

<head> 
<title> 风 套 函数 的 应 用 </title> 


<script type="text/javascript"> 


var outter=20; // 定 义 全 局 变量 
function add (numberl, number2){ // 定 义 外 部 函数 
function innerAadd(){ // 定 义 内 部 函数 
alert ("参数 的 和 为 : "+ (numberl+number2+outter)); // 取 参数 的 和 

return innerAdd(); // 调 用 内 部 函数 

3 

</script> 

</head> 

<body> 

<script type="text/javascript"> 

add (20,20); // 调 用 外 部 函数 

</script> 

</body> 

</html> 


在 耻 9.0 中 浏览 效果 如 图 18-8 所 示 。 


图 18-8 庶 套 函数 的 应 用 


全: 谋 套 函数 在 JavaScript 语言 中 的 功能 非常 强大 ， 但 是 使 用 说 套 函 数 会 使 程序 的 可 
| 长 读 性 降低 。 


18.3.2 ”案例 6 一 一 递归 函数 


递归 是 一 种 重要 的 编程 技术 ， 它 用 于 让 一 个 函数 从 其 内 部 调用 其 自身 。 但 是 ， 如 果 递 归 
函数 处 理 不 当 ， 会 使 程序 进入 “ 死 循 环 ”。 为 了 防止 “ 死 循环 ”的 出 现 ， 可 以 设计 一 个 做 自 
加 运算 的 变量 ， 用 于 记录 函数 自身 调用 的 次 数 ， 如 果 次 数 太 多 就 使 它 自动 退出 。 

递归 函数 的 语法 格式 如 下 。 


function 递归 函数 名 (参数 1) { 
递归 函数 名 (参数 2) ; 


使 374 


【 例 18.6】 递归 函数 的 应 用 (实例 文件 :ch18\18.6.html)。 
在 下 述 代码 中 ,为 了 求 取 20 以 内 的 偶数 和 定义 了 递归 函数 sum(m)， 而 函数 Test0 对 其 进 
行 调用 ， 并 利用 alert 方法 弹出 相应 的 提示 信息 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 函 数 的 递归 调用 </title> 
<script type="text/javascript"> 
<!-- 
var msg="\n 函数 的 递归 调用 : \n\n"; 
// 响 应 按钮 的 onclick 事件 处 理 程序 
function Test 1() 
Var result; 
msg+=" 调 用 语句 : \n"; 
msg+=" result = sum(20);\n"; 
msg+=" 调 用 步骤 : \n"; 
result=sum(20); 
msg+=" 计 算 结 果 : \n"; 
msg+=" result = "+result+"\n"; 
alert (msg); 


// 计 算 当前 步骤 加 和 值 
function sum (m) 
| 
if (m==0) 
return 0; 
else 
{ 
msg+=" 语句 : result = " +m+ "+sum(" +(m-2)+"); \n"; 
result=mt+sum (m-2); 
} 
return result; 
3 
一 -> 
</script> 
</head> 
<body> 
<center> 
<form> 
<input type=button value=" 测 试 "” onclick="Test () "> 
</form> 
</center> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 18-9 所 示 ， 单 击 【 测 试 】 按 钮 ， 即 可 在 弹出 的 提示 对 话 框 中 查 
看 递归 函数 的 应 用 ， 如 图 18-10 所 示 。 
@ 在 定义 递归 函数 时 ， 需 要 两 个 必要 条 件 : @ 包 括 一 个 结束 递归 的 条 件 ; 加 包括 一 
长 个 递归 调用 的 语句 。 
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18-9 ”递归 函数 的 应 用 18-10 ”程序 运行 结果 
18.3.3 ”案例 7 一 一 内 置 函 数 


JavaScript 中 有 两 种 函数 : 一 种 是 语言 内 部 事先 定义 好 的 函数 ， 叫 内 置 函 数 ， 另 一 种 是 自 
己 定义 的 函数 。 使 用 JavaScript 的 内 置 函数 ， 可 以 提高 编程 效率 ， 下 面 简要 介绍 常用 的 内 置 函数 。 


1. eval 函数 


eval(expD 函 数 可 以 把 一 个 字符 串 当 作 一 个 JavaScript 表达 式 一 样 去 执行 。 具 体 来 说 ， 就 
是 eval 接受 一 个 字符 串 类 型 的 参数 ， 将 这 个 字符 串 作为 代码 在 上 下 文 环境 中 执行 ， 并 返回 执 
行 的 结果 。 其 中 ，expr 参数 是 包含 有 效 JavaScript 代码 的 字符 串 值 ， 这 个 字符 串 将 由 
JavaScript 分 析 器 进行 分 析 和 执行 。 
在 使 用 eval 函数 时 需要 注意 以 下 两 点 。 
@ 它 是 有 返回 值 的 ， 如 果 参 数字 符 串 是 一 个 表达 式 ， 就 会 返回 表达 式 的 值 。 如 果 参 数 
字符 串 不 是 表达 式 ， 没 有 值 ， 那 么 返回 undefined。 
@ ”参数 字符 串 作为 代码 执行 时 ， 是 和 调用 eval 函数 的 上 下 文 相关 的 ， 即 其 中 出 现 的 变 
量 或 函数 调用 ， 必 须 在 调用 eval 的 上 下 文 环境 中 可 用 。 
【 例 18.7】 应 用 eval 函数 (实例 文件 : ch18\18.7.htmD)。 


<!DOCTYPE html> 
<html> 
<head> 
<title>eval 函数 应 用 示例 </title> 
</head> 
<script type="text/javascript"> 
过 二 二 
function computer (num) 
return eval (num)+eval (num); 
} 
document .write ("执行 语句 return eval (123) +eval (123) 后 结果 为 : "); 
document .write (computer('123°')); 


—-> 
</script> 

</html> 

在 正 9.0 中 浏览 效果 如 图 18-11 所 示 。 
2. isFinite 函数 


isFiniteCnumben) 函 数 用 来 确定 参数 是 否 是 一 个 有 限 数值 ， 其 中 number 参数 为 必 选 项 ， 可 
以 是 任意 数值 。 如 果 该 参数 为 非 数 字 、 正 无 穷 数 或 负 无 穷 数 ， 则 返回 false， 和 否则 返回 true; 
如 果 是 字符 串 类 型 的 数字 ， 则 将 会 自动 转化 为 数字 型 。 

【 例 18.8】 ”应 用 isFinite 函数 (实例 文件 ，ch18\18.8.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title>isFinite 函数 应 用 示例 </title> 

</head> 

<script type="text/javascript"> 

二 是 一 一 

document .write (" 执 行 语 句 isFinite(123) 后， 结果 为 ") 
document .write (isFinite(123)+ "<br/>") 
document .write ("执行 语句 isFinite(-3.1415) 后， 结果 为 ") 
document .write(isFinite(-3.1415)+ "<br/>") 
document .write ("执行 语句 isFinite (10-4) 后 ， 结 果 为 ") 
document .write (isFinite(10-4)+ "<br/>") 

document .write ("执行 语句 isFinite (0) 后， 结果 为 ") 
document .write (isFinite(0)+ "<br/>") 
document .write ("执行 语句 isFinite (Hello world! ) 后 ， 结 果 为 ") 
document .write (isFinite("Hello world! ")+ "<br/>") 
document .write ("执行 语句 isFinite (2009/1/1) 后 ， 结 果 为 ") 
document .write (isFinite("2009/1/1")+ "<br/>") 

一 -> 

</script> 

</html> 


在 正 9.0 中 浏览 效果 如 图 18-12 所 示 。 
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图 18-11 eval 函数 的 应 用 图 18-12 isFinite 函数 的 应 用 
3.isNaN 函数 


isNaN(num) 函 数 用 于 指明 提供 的 值 是 否 是 保留 值 NaN: 如 果 值 是 NaN， 那 么 isNaN 函数 
返回 true; 否则 返回 false。 参 数 num 为 被 检查 是 否 为 NAN 的 值 ， 当 参数 是 字符 串 类 型 的 数 
字 时 ， 将 会 自动 转化 为 数字 型 。 使 用 这 个 函数 的 典型 情况 是 检查 parseInt 函数 和 parseFloat 函 
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数 的 返回 值 。 另 一 种 判断 变量 是 否 为 NaN 的 办 法 是 令 变 量 与 其 自身 进行 比较 。 如 果 比 较 的 结 
果 不 等 ， 那 么 它 就 是 NaN。 这 是 因为 NaN 是 唯一 与 自身 不 等 的 值 。 
【 例 18.9】 应 用 isNaN 函数 (实例 文件 : ch18\18.9.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title>isNaN 函数 应 用 示例 </title> 
</head> 

<script type="text/javascript"> 


document .write ("执行 语句 isNaN (123) 后， 结果 为 ") 
document .write (isNaN(123)+ "<br/>") 

document .write ("执行 语句 isNaN (-3.1415) 后， 结果 为 ") 
document .write(isNaN(-3.1415)+ "<br/>") 
document .write ("执行 语句 isNaN (10-4) 后 ， 结 果 为 ") 
document .write (isNaN (10-4)+ "<br/>") 
document .write ("执行 语句 isNaN (0) 后 ， 结 果 为 ") 
document .write (isNaN (0)+ "<br/>") 
document .write ("执行 语句 isNaN (Hello world! ) 后， 结果 为 ") 
document .write (isNaN ("Hello world! ")+ "<br/>") 
document .write ("执行 语句 isNaN (2009/1/1) 后 ， 结 果 为 ") 
document .write (isNaN ("2009/1/1")+ "<br/>") 

--> 

</script> 

</html> 


在 下 9.0 中 浏览 效果 如 图 18-13 所 示 。 
4. parseInt 函数 和 parseFloat 函数 


parseInt 函数 和 parseFloat 函数 都 可 以 将 数字 字符 串 转化 为 一 
个 数值 ， 但 它们 也 存在 着 如 下 区 别 : 在 parseInt(str[radix]) 函 数 
中 ，str 参数 是 必 选 项 ， 为 要 转换 成 数字 的 字符 串 ， 如 “11”; 
radix 参数 为 可 选项 ， 用 于 确定 str 的 进 制 数 。 如 果 radix 参数 缺 - 
省 ， 则 前 级 为 0x' 的 字符 串 被 当 作 十 六 进 制 ， 前 级 为 '0' 的 字符 。 图 18-13 isNaN 函数 的 应 用 
串 被 当 作 八进制 ， 所 有 其 他 字符 串 都 被 当 作 是 十 进 制 。 当 第 一 个 字符 不 能 转换 为 基于 基数 的 
数字 时 ， 则 返回 NaN。 

【 例 18.10】 ”应 用 parseInt 函数 (实例 文件 : ch18\18.10.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title>parseInt 函数 应 用 示例 </title> 
</head> 

<body> 

<center> 

<h3>parseInt 函数 应 用 示例 </h3> 
<script type="text/javascript"> 
一 

document .write ("<br/>"+" 执 行 语句 parseInt('10') 后 ， 结 果 为 : ke /本 


Ee 
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document .write (parseInt ("10")+"<br/>") 7 
document .write ("<br/>"+" 执 行 语句 parseInt ('21',10) 后 ， 结 果 为 : ") ，; 
document .write (parseInt ("21",10)+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseInt ('11',2) 后， 结果 为 : ") ; 
document .write (parseInt ("11",2)+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseInt ('15', 8) 后 ， 结 果 为 : ") ，; 
document .write (parseInt ("15",8)+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseInt ('1f',16) 后 ， 结 果 为 : ") ，; 
document .write (parseInt ("1f",16)+"<br/>") ; 
document .write ("<br/>"+" 执 行 语句 parseInt ('010') 后 ， 结 果 为 : ") ，; 
document .write (parseInt ("010")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseInt ('abc') 后 ， 结 果 为 : ") ; 
document .write (parseInt ("abc")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseInt('l2abc') 后 ， 结 果 为 : ") ; 
document .write (ParseInt ("1l2abc")+"<br/>") ; 

--> 

</script> 

</center> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 18-14 所 示 ， 从 结果 中 可 以 看 出 表达 式 parseInt(15',8) 会 把 八 进 
制 的 15 转换 为 十 进 制 的 数值 ， 其 计算 结果 为 13， 即 按照 radix 这 个 基数 ， 使 字符 串 转化 为 十 
进 制 数 。 

parseFloat(stD) 函 数 返回 由 字符 串 转换 得 到 的 浮 点 数 ， 其 中 字符 串 参数 是 包含 浮 点 数 的 字 
符 串 ， 即 如 果 str 的 值 为 11",， 那 么 计算 结果 就 是 11， 而 不 是 3 或 B。 如 果 处 理 的 字符 不 是 以 
数字 开头 ， 则 返回 NaN。 当 字符 后 面 出 现 非 字 符 部 分 时 ， 则 只 取 前 面 数字 部 分 。 

【 例 18.11】 ”应 用 parseFloat 函数 (实例 文件 :ch18\18.11.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title>parseFloat 函数 应 用 示例 </title> 

</head> 

<body> 

<center> 

<h3>parseFloat 函数 应 用 示例 </h3> 

<script type="text/javascript"> 

<§== 

document .write ("<br/>"+" 执 行 语句 parseFloat ('10') 后 ， 结 果 为 : ") ，; 
document .write (parseFloat ("10")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseFloat ('21.001') 后 ， 结 果 为 : ") ; 
document .write (parseFloat ("21.001")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseFloat ('21.999') 后 ， 结 果 为 : ") ，; 
document .write (parseFloat ("21.999")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseFloat ('314e-2') 后 ， 结 果 为 : ") ，; 
document .write (parseFloat ("314e-2")+"<br/>") ; 

document -write ("<br/>"+" 执 行 语句 parseFloat ('0.0314E+2') 后 ， 结 果 为 : ") ，; 
document .write (parseFloat ("0.0314E+2")+"<br/>") ; 
document .write ("<br/>"+" 执 行 语句 parseFloat ('010') 后 ， 结 果 为 : ") ，; 
document .write (parseFloat ("010")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseFloat ('abc') 后 ， 结 果 为 : ") ; 
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document .write (parseFloat ("abc")+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 parseFloat ('1.2abc') 后 ， 结 果 为 : ") ，; 
document .write (parseFloat ("1.2abc")+"<br/>") ; 

--> 

</script> 

</center> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 18-15 所 示 。 
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图 18-14 parselnt 函数 的 应 用 图 18-15 ”parseFloat 函数 的 应 用 
5. Number 函数 和 String 函数 


在 JavaScript 中 ，Number 函数 和 String 函数 主要 用 来 将 对 象 转换 为 数字 或 字符 串 。 其 
中 ，Number 函数 的 转换 结果 为 数值 型 ， 如 Number("1234") 的 结果 为 1234; String 函数 的 转换 
结果 为 字符 型 ， 如 String(1234) 的 结果 为 "1234"。 

【 例 18.12】 应 用 Number 函数 和 String 函数 (实例 文件 ，chl8\18.12.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title>Number 和 string 应 用 示例 </title> 

</head> 

<body> 

<center> 

<h3>Number 和 string 应 用 示例 </h3> 

<script type="text/javascript"> 

<t== 

document .write ("<br/>"+" 执 行 语句 Number ('1234')+Number ('1234') 后 ， 结 果 为 :") 
document .write (Number ('1234')+Number ('1234')+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 string('1234')+string('1234') 后 ， 结 果 为 : ") ，; 
document .write (String('1234')+String('1234')+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 Number ('"abc')+Number('abc') 后 ， 结 果 为 : ") ，; 
document .write (Number ('abc')+Number('abc')+"<br/>") ; 

document .write ("<br/>"+" 执 行 语句 string('abc')+String('abc') 后 ， 结 果 为 : ") ， 
document .write(String('abc')+String('abc')+"<br/>") ; 

一 -> 

</script> 

</center> 

</body> 

</html> 


全 


运行 上 述 代 码 ， 结 果 如 图 18-16 所 示 ， 从 中 可 以 看 出 ， 语 句 Number(1234)+Number(1234) 
会 将 “1234” 转 换 为 数值 型 并 进行 数值 相 加 ， 结 果 为 2468; 而 语句 String(1234)+String(1234) 
则 是 按照 字符 串 相 加 的 规则 将 “1234” 合 并 ， 结 果 为 12341234。 


6.escape 函数 和 unescape 函数 


escape(charString) 函 数 主要 用 于 对 String 对 象 编码 ， 以 便 它 们 能 在 所 有 计算 机 上 可 读 。 其 
中 charString 参数 为 必 选 项 ， 表 示 要 编码 的 任意 String 对 象 或 文字 。 它 返回 一 个 包含 了 
charString 内 容 的 字符 串 值 (Unicode 格式 )。 除 了 个 别 如 *、@ 之 类 的 符号 外 ， 其 余 所 有 空格 、 
标点 、 重 音符 号 以 及 其 他 非 ASCII 字符 均 可 用 %xx 编码 代替 ， 其 中 xx 等 于 表示 该 字符 的 
十 六 进 制 数 。 

【 例 18.13】 应 用 escape 函数 (实例 文件 : ch18\18.13.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title>escape 应 用 示例 </title> 

</head> 

<body> 

<center> 

<h3>escape 应 用 示例 </h3> 

</center> 

<script type="text/javascript"> 

ee 

document .write(" 由 于 空格 符 对 应 的 编码 是 s20， 感 叹 号 对 应 的 编码 是 s21，"+"<br/>") :; 
document .write ("<br/>"+" 故 ， 执 行 语句 escape('hello world!') 后 ,，"+"<br/>") ，; 
document .Write ("<br/>"+" 结 果 为 : "+escape('hello world!')) ; 

一 -> 

mript> 

</body> 

</html> 


运行 上 述 代码 ， 结 果 如 图 18-17 所 示 ， 由 于 空格 符 对 应 的 编码 是 %20， 感 叹 号 对 应 的 编码 
是 %21， 因 此 执行 语句 escape(hello world!") 后 ， 显 示 结 果 为 hello%20world%21。 
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escape 应 用 示例 


由 于 空格 符 对 应 的 编码 是 20， 感 叹 号 对 应 的 编码 是 w21， 
故 ， 执 行 语句 escape( hello worlal ) 后 ， 


结果 为 。，hellok2pwcrldk21 


蕊 190 = 


图 18-16 Number 函数 和 String 函数 的 应 用 18-17 escape 函数 的 应 用 

unescape(charString) 函 数 用 于 返回 指定 值 的 ASCII 字符 串 ， 其 中 charString 参数 为 必 选 
项 ， 表 示 需 要 解码 的 String 对 象 。 与 escape(charString) 函 数 相 反 ，unescape(charString) 函 数 返 
本 一 个 包含 charString 内 容 的 字符 串 值 ， 所 有 以 %xx 十 六 进 制 形式 编码 的 字符 都 会 用 ASCII 字 
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符 集中 等 价 的 字符 代替 。 
【 例 18.14】 ”应 用 unescape 函数 (实例 文件 : ch18\18.14.html)。 
<!DOCTYPE html> 
<html> 
<head> 
<title>unescape 函数 应 用 示例 </title> 
</head> 
<body> 
<center> 
<h3>unescape 函数 应 用 示例 </h3> 
</center> 
<script type="text/javascript"> 
-三 三 


document .write(" 由 于 空格 符 对 应 的 编码 是 ws20， 感 叹 号 对 应 的 编码 是 s21，"+"<br/>") ; 
document .write ("<br/>"+" 故 ， 执行 语句 unescape('hello%20world%21') 后 ， 
WE 

document .write ("<br/>"+" 结 果 为 : "+unescape ('hello%20world%21')) ，; 

--> 

</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 18-18 所 示 。 


司 ezotyogJRmSrHSRY22 二 DD- Cx| 
unescape ER 


立 伯 月 蝙 六 介 。 司 乔 (V) 改建 羡 (A) 工 电大 动 IH) 
从" 回 " 口 虽 ”FEi 安 29” IR(O)" 人命" 见 思 


unescape 函 数 应 用 示例 


由 于 空格 符 对 应 的 编码 是 X20， 感 双 号 对 应 的 编码 是 %21， 
故 ， 执 行 语句 unescape( bellog20wcrldk21 ) 后， 
结果 为 :kello werld! 


18-18 ”unescape 函数 的 应 用 


18.4 ”实战 演练 一 一 购物 简易 计算 器 


如 图 18-19 所 示 ， 编 写 具 有 能 对 两 个 操作 数 进行 加 、 减 、 乘 、 除 运算 的 简易 计算 器 。 加 法 
运算 效果 如 图 18-20 所 示 ， 减 法 运算 效果 如 图 18-21 所 示 ， 乘 法 运算 效果 如 图 18-22 所 示 ， 除 
法 运算 效果 如 图 18-23 所 示 。 本 例 中 涉及 了 本 书 中 介绍 的 数据 类 型 、 变 量 、 流 程控 制 语句 、 
函数 等 知识 。 请 读者 注意 ， 该 示例 中 还 涉及 少量 后 续 章节 的 知识 ， 如 事件 模型 。 不 过 ， 前 面 
的 案例 中 也 有 使 用 ， 请 读者 先 掌握 其 用 法 ， 详 见 第 19 章 。 
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图 18-22 乘法 运算 运算 
有 具体 操作 步骤 如 下 。 
新 建 HTML 文档 ， 输 入 如 下 代码 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title> 购 物 简易 计算 器 </title> 

<style> 

/* 定 义 计算 器 块 信息 */ 

sectiont{ 
background-color:#C9E495; 
width:260px; 
height:320px; 
text-align:center; 
padding-top:1lpx; 


. 
/* 细 边框 的 文本 输入 框 */ 
.textBaroder 
{ 
border-width:1px; 
border-style:solid; 
. 


</STYLE> 

</head> 

<body> 

<section> 

<hl><img src="images/logo.gif" width="240" height="31"” > 欢迎 您 来 淘宝 ! </h1> 
<form action="" method="post" name="myform" id="myform"> 
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<h3><img src="images/shop.gif" width="54"” height="54"> 购 物 简易 计算 器 </h3> 

<p> 第 一 个 数 <input name="txtNuml" type="text" class="textBaroder" 
id="txtNuml" size="25"></p> 

<p> 第 二 个 数 <input name="txtNum2" type="text" class="textBaroder" 
id="txtNum2" size="25"></p> 

<p><input name="addButton2" type="button" id="addButton2" value=" 十 " 
onClick="compute('+')"> 


<input name="subButton2" type="button" id="subButton2" value wp 
<input nam mulButton2" type="button" id="mulButton2" valu Ws 
<input nam divButton2" type="button" id="divButton2" valu 5 


<p> 计 算 结果 <INPUT name="txtResult" type="text" class 
id="txtResult" size="25"></p> 

</form> 

</section> 

</body> 

</html> 


EGR 保存 HTML 文件 ， 选 择 相应 的 保存 位 置 ， 文 件 名 为 “综合 示例 
算 器 .html”。 
四 于 BY 在 HTML 文档 的 head 部分， 输入 如 下 代码 。 


<script> 
function compute (op) 
{ 
Var numl,num2; 
numl=parseFloat (document .myform.txtNuml .value); 
num2=parseFloat (document .myform.txtNum2 .value) 
if (op=="+") 
document .myform.txtResult .value=numl+num2; 
if (op==" 一 " 
document .myform.txtResult .value=numl-num2; 


"textBaroder™" 


购物 简易 计 


document .myform.txtResult .value=numl*num2; 
if (op=="/" && num2!=0) 
document .myform.txtResult .value=numl /num2; 


} 
</script> 


EEIZ 修改 “+” 按 钮 、“-” 按 钮 、“X” 按 钮 、“ 二 ”按钮 ， 代 码 如 下 。 


<input name="addButton2" type="button" id="addButton2" value=" 十 " 
onClick="compute('+')"> 


<input name="subButton2" type="button™" id="subButton2" value=" 一 " 
onClick="compute('—')"> 
<input name="mulButton2" type="button" id="mulButton2" value=" X " 
onClick="compute('*')"> 
<input name="divButton2" type="button" id="divButton2" Value="” 二 " 


onClick="compute('/')"> 


ED 保存 网 页 ， 然 后 即 可 预览 效果 。 


18.5 ” 跟 我 练 练 手 
18.5.1 练习 目标 
能 够 熟练 掌握 木 章 所 讲 内 容 。 


18.5.2 上 机 练习 


练习 1: 在 JavaScript 程序 中 调用 函数 。 
练习 2: 在 JavaScript 程序 中 应 用 常用 函数 。 
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18.6 高 手 甜 点 


甜点 1: 如 果 浏 览 器 不 支持 JavaScript， 如 何不 影响 网 页 的 美观 


现在 浏览 器 种 类 、 版 本 繁多 ， 不 同 浏览 器 对 JavaScript 代码 的 支持 度 均 不 一 样 。 为 了 保证 
浏览 器 不 支持 部 分 的 代码 不 影响 网 页 的 美观 ， 可 以 使 用 HTML 注释 语句 将 其 注释 ， 这 样 便 不 
会 在 网 页 中 输出 这 些 代码 。HTML 中 使 用 “<!--” 和 “-->” 符号 注释 JavaScript 代码 。 


甜点 2: Number 函数 和 parseInt 函数 都 可 以 将 字符 串 转换 成 整数 ， 它 们 有 何 区 别 


Number 函数 和 parseInt 函数 都 可 以 将 字符 串 转 换 成 整数 ， 它 们 之 间 的 区 别 如 下 。 

Number 函数 不 但 可 以 将 数字 字符 串 转换 成 整数 ， 还 可 以 转换 成 浮 点 数 。 它 的 作用 是 将 数 
字 字 符 串 直 接 转换 成 数值 。 而 parseInt 函数 只 能 将 数字 字符 串 转换 成 整数 。 

Number 函数 在 转换 时 ， 如 果 字 符 串 中 包括 非 数字 字符 ， 转 换 将 会 失败 。 而 parseInt 函数 
在 转换 时 ， 只 要 开头 第 一 个 字符 是 数字 字符 ， 即 可 转换 成 功 。 
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19.1 字符 串 对 象 


字符 串 类 型 是 JavaScript 中 的 基本 数据 类 型 之 一 。 在 JavaScript 中 ， 可 以 将 字符 串 直 接 看 
成 字符 串 对 象 ， 不 需要 任何 转换 。 


19.1.1 案例 1 一 一 创建 字符 串 对 象 的 方法 


字符 串 对 象 有 两 种 创建 方法 。 

1. 直接 声明 字符 串 变 量 

通过 前 面 学 习 的 声明 字符 串 变 量 的 方法 ， 把 声明 的 变量 看 作 字 符 串 对 象 ， 语 法 格式 如 下 。 
[var] 字符 串 变量 = 字符 串 


Se Var 是 可 选项 。 
DS 


例如 ， 创 建 字符 串 对 象 myString， 并 对 其 赋值 ， 代 码 如 下 。 


Var myString="This is a sample"; 
2. 使 用 new 关键 字 来 创建 字符 串 对 象 


使 用 new 关键 字 创建 字符 串 对 象 的 方法 如 下 。 
[var] 字符 串 对 象 =new string (字符 串 ) 


SE。 var 是 可 选项 ， 字 符 事 构 造 函 数 Sting0 的 第 一 个 字母 必须 为 大 写字 母 ， 
、\ 


例如 ， 通 过 new 关键 字 创建 字符 串 对 象 myString， 并 对 其 赋值 ， 代 码 如 下 。 


Var myString=new String("This is a sample") 7 


全 上 述 两 种 语句 的 效果 是 一 样 的 ， 因 此 声明 字符 串 时 可 以 采用 new 关键 字 ， 也 可 以 
站 起 不 采用 new 关键 字 。 


【 例 19.1】 使 用 new 关键 字 和 构造 函数 (constructor)String0 创 建 字 符 串 对 象 (实例 文件 : 
chl9\19.1 htmD。 


<html> 
<body> 
<script type="text/javascript"> 
Var myStringObject = new String( "abc" ); 
document .write( typeof( mystringObject ) ); 
document -write( "<br />" ); 
document .write( myStringObject.length ); 
document -write( "<br />" ); 
document .write( typeof( mySstringObject ) ); 


</script> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 19-1 所 示 。 
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图 19-1 创建 字符 串 对 象 
19.1.2 ”案例 2 一 一 字符 串 对 象 常用 属性 的 应 用 


字符 串 对 象 的 属性 比较 少 ， 常 用 的 属性 为 length。 字 符 串 对 象 的 属性 及 说 明 如 表 19-1 所 示 。 
表 19-1 字符 串 对 象 的 属性 及 说 明 


当 兰 贺 娃 专 于 写 革 下 duoSener 者 6 波 旧 
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字符 串 对 象 的 函数 模型 
添加 字符 串 对 象 的 属性 
对 象 属性 的 使 用 格式 如 下 。 
对 象 名 .属性 名 // 获 取 对 象 属性 值 


对 象 名 .属性 名 = 值 // 为 属性 赋值 
例如 ， 输 出 字符 串 对 象 myArcticle 包含 的 字符 个 数 ， 代 码 如 下 。 


var myArcticle=" 千里 始 足 下 , 高山 起 微 尘 , 吾 道 亦 如 此 , 行 之 贵 日 新 。 一 一 白居易 " 
document .write (myArcticle.length); // 输 出 字符 串 对 象 字 符 的 个 数 


全 3 测试 字符 囊 长 度 时 ， 空 格 也 占 一 个 字符 位 。 一 个 汉字 占 一 个 字符 位 ， 即 一 个 汉字 
注 ”的 长 度 为 1. 


蕊 


【 例 19.2】 计算 字符 串 的 长 度 (实例 文件 ，ch19\19.2.html)。 


<html> 

<body> 

<script type="text/javascript"> 

Var txt="Hello World!™" 

document .write ("字符 串 “Hello World!” 的 长 度 为 : "+txt .length) 
</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 19-2 所 示 。 
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字符 串 “Hello World!” 的 长 度 为 12 


图 19-2 计算 字符 串 的 长 度 
19.1.3 ”案例 3 一 一 字符 串 对 象 常用 方法 的 应 用 


字符 串 对 象 是 内 置 对 象 之 一 ， 也 是 常用 的 对 象 。 在 JavaScript 中 ， 经 常会 在 对 字符 串 对 象 
中 查找 、 蔡 换 字符 。 为 了 方便 操作 ，JavaScript 中 内 置 了 大 量 方法 ， 用 户 只 需要 直接 使 用 这 些 
方法 ， 即 可 完成 相应 操作 。 字 符 串 对 象 的 常用 方法 如 表 19-2 所 示 。 


表 19-2 ”字符 串 对 象 的 常用 方法 


5 说 明 
anchor 创建 HTML 锚 
big 用 大 号 字体 显示 字符 串 
blink 显示 内 动 字符 串 
bold 使 用 粗 体 显示 字符 串 
charAt 返回 在 指定 位 置 的 字符 
charCodeAtl 返回 在 指定 的 位 置 的 字符 的 Unicode 编码 
concat! 连接 字符 串 
fixedt 以 打字 机 文本 显示 字符 串 
fontcolor 使 用 指定 的 颜色 来 显示 字符 串 
fontsizet 使 用 指定 的 尺寸 来 显示 字符 串 
fromCharCodel 从 字符 编码 创建 一 个 字符 串 
indexO 检索 字符 串 
italics() 使 用 斜体 显示 字符 串 
lastIndexOf() 从 后 向 前 搜索 字符 串 
link 将 字符 串 显 示 为 链接 
localeCompare() 用 本 地 特定 的 顺序 来 比较 两 个 字符 串 
matchO 找到 一 个 或 多 个 正则 表达 式 的 匹配 
TeplaceO 替换 与 正则 表达 式 匹 配 的 子 串 
search() 检索 与 正则 表达 式 相 匹 配 的 值 
slice() 提取 字符 串 的 片段 ， 并 在 新 的 字符 串 中 返回 被 提取 的 部 分 
small 使 用 小 字号 来 显示 字符 串 
split 把 字符 串 分 割 为 字符 串 数组 
strikeO 使 用 删除 线 来 显示 字符 串 
sub 把 字符 串 显示 为 下 标 


全 3%0 


入 遂 


第 

续 表 司 

方 法 说 明 | 

substr 从 起 始 索 引号 提取 字符 串 中 指定 数目 的 字符 3 
substringO 提取 字符 串 中 两 个 指定 的 索引 号 之 间 的 字符 3 
sup0 把 字符 串 显示 为 上 标 
toLowerCaseO/toLocaleLowetCase0 把 字符 串 转换 为 小 写 核 
toUpperCaseO/toLocaleUPpPerCaset 把 字符 串 转换 为 大 写 中 
tosouree0 代表 对 象 的 源 代码 下 
toString0 返回 字符 串 | 
valueOf\ 返回 某 个 字符 串 对 象 的 原始 值 
象 


下 面 将 详细 讲解 字符 串 对 象 的 常用 方法 和 技巧 。 
1. 设置 字符 串 的 字体 属性 


使 用 字符 串 的 方法 可 以 设置 字符 串 字 体 的 相关 属性 ， 如 设置 字符 串 字体 的 大 小 、 颜 色 
等 。 如 以 大 号 字体 显示 字符 串 ， 就 可 以 使 用 big0 方 法 ; 以 粗 体 方式 显示 字符 串 ， 就 可 以 使 用 
bold0 方 法 。 具 体 的 语法 格式 如 下 。 


GG 


stringObject .big() 

stringObject .bold() 

【 例 19.3】 设置 字符 串 的 字体 属性 (实例 文件 ，ch19\19.3.htmD)。 
<html> 

<body> 


<script type="text/javascript"> 

var txt=" 清 明 时 节 雨 纷纷 " 

document .write ("正常 显示 为 : " + txt + sr | 
document .write ("以 大 号 字体 显示 为 : " + txt.big() + "</p>") 
document .write ("以 小 号 字体 显示 为 : " + txt.small() + wep 
document .write ("以 粗 体 方式 显示 为 : " + txt.bold() + bd od | 
document .write ("以 倾斜 方式 显示 为 : " + txt.italics() + me AB 
document .write ("以 打印 体 方式 显示 为 : " + txt.fixed() + "</p>") 
document .write ("添加 删除 线 显示 为 : " + txt.strike() + "</p>") 

document .write ("以 指定 的 颜色 显示 为 : " + txt.fontcolor ("Red") + "</p>") 
document .write ("以 指定 字体 大 小 显示 为 : " + txt.fontsize(16) + "</p>") 
document .write ("以 下 标 方式 显示 为 : " + txt.sub() + "</p>") 
document .write ("以 上 标 方式 显示 为 : " + txt.sup() + "</p>") 

document .write ("为 字符 串 添加 超级 链接 : "+txt.link("http://www.baidu.com") + 
"</p>") 

</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 19-3 所 示 。 
2. 以 闪烁 方式 显示 字符 串 
使 用 blink0 方 法 可 以 显示 闪 动 的 字符 串 。 语 法 格式 如 下 。 
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stringObject .blink() 


3 该 方法 不 被 下 浏览 器 支持 。 
注 
上 i 


【 例 19.4】 (实例 文件 : ch19\19.4.html)。 


<html> 

<body> 

<script type="text/javascript"> 
var str=" 清 明 时 节 雨 纷纷 " 

document .write(str.blink()) 
</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 19-4 所 示 。 
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图 19-3 设置 字符 串 字体 属性 图 19-4 ”显示 闪 动 的 字符 串 
3. 转换 字符 串 的 大 小 写 


使 用 字符 串 对 象 中 的 toLocaleLowerCase()、toLocaleUpperCase() 、toLowerCase() 、 
toUpperCase0 方 法 可 以 转换 字符 串 的 大 小 写 。 这 4 种 方法 的 语法 格式 如 下 。 


stringObject.toLocaleLowerCase () 
stringObject .toLowerCase () 
Stringobject .toLocaleUpperCase () 
stringobject.toUpperCase () 


四 了 


与 toUpperCaseO(toLowerCaseO) 不 同 的 是 ，toLocaleUpperCaseO(toLocaleLowerCaseO) 
| 长 方法 按照 本 地 方式 把 字符 串 转换 为 大 写 (小 写 )。 只 有 几 种 语言 (如 土耳其 语 ) 具 有 地 方 
” ”特有 的 大 小 写 映射 ， 所 以 该 方法 的 返回 值 通常 与 toUpperCaseO(toLowerCaseO) 一 样 。 

【 例 19.5】 转换 字符 串 的 大 小 写 (实例 文件 ，ch19\19.5.html)。 


<html> 


全 


<body> 

<script type="text/javascript"> 

Var txt="Hello World!™" 

document .write ("正常 显示 为 : " + txt + "</p>") 
document .write ("以 小 写 方式 显示 为 : " + txt.toLowerCase() + "</p>") 
document .write ("以 大 写 方式 显示 为 : " + txt.toUpperCase() + "</p>") 

document .write ("按照 本 地 方式 把 字符 串 转 化 为 小 写 : ”+ txt.toLocaleLowerCase() + 
"</p>") 

document .write ("按照 本 地 方式 把 字符 串 转 化 为 大 写 : " + txt.toLocaleUpperCase() + 
"</p>") 

</script> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 19-5 所 示 。 可 以 看 出 按照 本 地 方式 转换 大 小 写 与 不 按照 本 地 方 
式 转换 大 小 写 得 到 的 结果 是 一 样 的 。 
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按 网 本 地 方式 把 字符 第 竺 化 为 小 瑟 ，hello worldl 
执 阳 本 地 方式 失守 符 事 特 化 为 大 瑟 。IeL10 won! 


19-5 ”转换 字符 串 的 大 小 写 


4. 连接 字符 囊 
使 用 concat( 方 法 可 以 连接 两 个 或 多 个 字符 串 。 语 法 格式 如 下 。 
stringObject.concat (StringX, stringX,...,stringx) 


其 中 ，stringX 为 必 选 项 ， 指 将 被 连接 为 一 个 字符 串 的 一 个 或 多 个 字符 串 对 象 。 
concat() 方 法 将 把 它 的 所 有 参数 转换 成 字符 串 ， 然 后 按 顺 序 连 接 到 字符 串 stringObject 的 尾 
部 ， 并 返回 连接 后 的 字符 串 。 


3 stringObject 本 身 并 没有 被 更 改 。 另外 ，stringObject.concat0 与 Array.concatO 很 相 
崩 竣 名 -不 过 ,使 用 "+ "运算 从 来 进行 字符 囊 的 连接 运算 通常 全 更 简 保 一 些 . 


【 例 19.6】 连接 字符 串 ( 实 例文 件 ，ch19\19.6.html)。 


<html> 

<body> 

<script type="text/javascript"> 
var strl=" 清 明 时 节 雨 纷纷 ，" 

var str2=" 路 上 行人 欲 断 瑰 。" 

document .write(strl.concat (str2)) 
</acript> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 19-6 所 示 。 


39@ 


$ 394 


网 页 设计 与 网 站 建设 


返 


9 


案例 课堂 昌 - 


5. 比较 两 个 字符 串 的 大 小 

使 用 localeCompare0 方 法 可 以 用 本 地 特定 的 顺序 来 比较 两 个 字符 串 。 语 法 格式 如 下 。 
stringObject.1localeCompare (target) 

其 中 ，target 参数 是 要 以 本 地 特定 的 顺序 与 stringObject 进行 比较 的 字符 串 。 


比较 完成 后 ， 其 返回 值 是 代表 比较 结果 的 数字 。 如 果 stringObject 小 于 target， 则 localeCompareO 
小 于 0 的 数 。 如 果 stringObject 大 于 target， 则 该 方法 返回 大 于 0 的 数 。 如 果 两 个 字符 串 


相等 ， 或 根据 本 地 排序 规则 没有 区 别 ， 该 方法 返回 0。 


【 例 19.7】 比较 两 个 字符 串 的 大 小 (实例 文件 : ch19\19.7.htmD)。 


<html> 

<body> 

<script type="text/javascript"> 
var strl="Hello world" 

var str2="hello World" 

Var str3= strl.localeCompare (str2) 
document .write ("比较 结果 为 : "+ str3) 
</script> 

</body> 

</html> 


在 IE 9.0 中 浏览 效果 如 图 19-7 所 示 。 
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19-6 ”连接 字符 串 19-7 ”比较 两 个 字符 串 的 大 小 


19.2 数学 对 象 
Math 对 象 提 供 了 大 量 的 数学 常量 和 数学 函数 。 在 使 用 Math 对 象 时， 不 能 使 用 关键 字 


new 来 创建 对 象 实例 ， 而 应 直接 使 用 “对 象 名 .成 员 ” 的 格式 来 访问 其 属性 和 方法 。 
19.2.1 案例 4 一 一 创建 Math 对 象 


创建 Math 对 象 的 语法 结构 如 下 。 

Math. [{propertylmethod}] 

各 个 参数 的 含义 如 下 。 

@ property: 必 选 项 ， 为 Math 对 象 的 一 个 属性 名 。 
ee method: 必 选 项 ， 为 Math 对 象 的 一 个 方法 名 。 


加 


Math 对 象 并 不 像 Date 和 String 那样 是 对 象 的 类 ， 因 此 没有 构造 函数 Math0， 像 Math.sin0) 
这 样 的 函数 只 是 函数 ， 不 是 某 个 对 象 的 方法 。 用 户 无 须 创 建 ， 通 过 把 Math 作为 对 象 使 用 就 可 
以 调用 其 所 有 属性 和 方法 。 
【 例 19.8】 在 字符 串 中 检索 不 同 的 子 串 ( 实 例文 件 ， ch19\19.8.html)。 


<html> 

<body> 

<script type="text/javascript"> 

Var str="Hello world!™" 

document .write(str.match ("world")+"<br/>") 
document .write(str.match ("World")+"<br/>") 
document .write(str.match ("worlld")+"<br/>") 
document .write(str.match ("world!")) 
</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 19-8 所 示 。 
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19-8 在 字符 串 中 检索 不 同 的 字 串 
19.2.2 ”案例 5 一 一 数学 对 象 属性 的 应 用 


Math 对 象 的 属性 是 数学 中 常用 的 常量 。Math 对 象 的 属性 如 表 19-3 所 示 。 
表 19-3 Math 对 象 的 属性 


E 返回 算术 常量 e， 即 自然 对 数 的 底数 ( 约 等 于 2.718) 
LN2 返回 2 的 自然 对 数 ( 约 等 于 0.693) 
LN10 返回 10 的 自然 对 数 ( 约 等 于 2.302) 
LOG2E 返回 以 2 为 底 的 e 的 对 数 ( 约 等 于 1.443) 
LOG10E 返回 以 10 为 底 的 e 的 对 数 ( 约 等 于 0.434) 
PI 返回 圆周 率 ( 约 等 于 3.14159) 
SQRT1 2 返回 2 的 平方 根 的 倒数 ( 约 等 于 0.707) 
SQRI2 返回 2 的 平方 根 ( 约 等 于 1.414) 
【 例 19.9】 Math 对 象 属性 的 综合 应 用 (实例 文件 : ch19\19.9.htmD)。 
<html> 
<body> 


<script type="text/javascript"> 
Var numVarl=Math.E 
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document .write ("E 属性 应 用 后 的 计算 结果 为 : " +numvVarl1); 
document .write ("<br>"); 
document .write ("<br>"); 
Var numVar2=Math .LN2 
document .write ("LN2 属性 应 用 后 的 计算 结果 为 : " +numVar2); 
document .write ("<br>"); 
document .write ("<br>"); 
var numVar3=Math.LN10 
document .write ("LN10 属性 应 用 后 的 计算 结果 为 : " +numVar3); 
document -write ("<br>"); 
document .write ("<br>"); 
var numVar4=Math. LOG2E 
document .write ("LOG2E 属性 应 用 后 的 计算 结果 为 : " +numVar4) ; 
document .write ("<br>"); 
document .write("<br>"); 
Var numVar5=Math. LOG10E 
document .write ("LOG10E 属性 应 用 后 的 计算 结果 为 : " +numVar5) 7 
document .write ("<br>") 7 
document .wTite ("<br>") 7 
Var numVar6=Math. PI 
document .write ("PI 属性 应 用 后 的 计算 结果 为 : ”+numVar6) 7 
document .write ("<br>"); 
document .write ("<br>"); 
Var numVar7=Math. SQRT1 2 
document .write("SQRT1 2 属性 应 用 后 的 计算 结果 为 : " +numVar7)， 
document .write ("<br>"); 
document .write ("<br>"); 
Var numVar8=Math. SQRT2 
document .write ("SQRT2 属性 应 用 后 的 计算 结果 为 : " +numVar8); 
</script> 
</body> 
</html> 


在 IE 9.0 中 浏览 效果 如 图 19-9 所 示 。 
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19-9 Math 对 象 属性 的 综合 应 用 
19.2.3 ”案例 6 一 一 数学 对 象 方法 的 应 用 
Math 对 象 的 方法 是 数学 中 常用 的 函数 ， 如 表 19-4 所 示 。 


加 


第 
表 19-4 Math 对 象 的 方法 EE 
方 法 说 明 s 
abs(x) 返回 数 的 绝对 值 名 
acos(x) 返回 数 的 反 余 弦 值 忌 
asin(x) 返回 数 的 反正 弦 什 
atan(x) 以 介 于 -PU2 与 PU2 弧度 之 间 的 数值 来 返回 x 的 反正 切 什 江 
atan2(y.x) 返回 从 x 轴 到 点 (x,y) 的 角度 ( 介 于 -PL2 与 PV2 弧度 之 间 ) 容 
ceil(x) 对 数 进行 上 舍 入 | 
Cos(x) 返回 数 的 余弦 值 置 
exp(x) 返回 e 的 指数 值 -| NN 
floor(x) 对 数 进 行 下 舍 入 
log(x) 返回 数 的 自然 对 数 ( 底 为 6) 江 
max(Gx.y 返回 x 和 y 中 的 较 大 值 SS 
min(x,y 返回 x 和 y 中 的 较 小 值 
pow(x,y, 返回 x 的 了 次 索 
random( 返回 0 一 1 之 间 的 随机 数 
round(x) 把 数 四 舍 五 入 为 最 接近 的 整数 
sin(x) 返回 数 的 正弦 值 
sqrt(x) 返回 数 的 平方 根 
tan(x) 返回 角 的 正切 值 
toSource() 返回 该 对 象 的 源 代码 
valueofn 返回 Math 对 象 的 原始 值 


下 面 详细 讲述 Math 对 象 常用 方法 的 使 用 。 

1. 返回 数 的 绝对 值 

使 用 abs( 方 法 可 返回 数 的 绝对 值 。 其 语法 格式 如 下 。 
Math .abs (x) 


其 中 ， 参 数 x 为 必 选 项 ， 必 须 是 一 个 数值 。 
【 例 19.10】 计算 数值 的 绝对 值 (实例 文件 ，ch19\19.10.html)。 


<html> 
<body> 
<script type="text/javascript"> 
Var numVarl=2 
Var numVar2=-2 
document .write(" 正 数 2 的 绝对 值 为 : "+ Math.abs (numVarl) + "<br />") 
document .write ("负数 -2 的 绝对 值 为 : "+ Math.abs (numVar2)) 
</script> 
</body> 
</html> 
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在 正 9.0 中 浏览 效果 如 图 19-10 所 示 。 
2. 返回 两 个 或 多 个 参数 中 的 最 大 值 或 最 小 值 
使 用 max() 方 法 可 返回 两 个 或 多 个 指定 参数 中 的 最 大 值 。 其 语法 格式 如 下 。 


Math -max (Xx---) 


其 中 参数 x 为 0 或 多 个 值 。 其 返回 值 为 参数 中 最 大 的 数值 。 
使 用 min0 方 法 可 返回 两 个 或 多 个 指定 参数 中 的 最 小 值 。 其 语法 格式 如 下 。 


Math.min(x...) 


其 中 参数 x 为 0 或 多 个 值 。 其 返回 值 为 参数 中 最 小 的 数值 。 
【 例 19.11】 返回 参数 当中 的 最 大 值 或 最 小 值 (实例 文件 ，ch19\19.11.html)。 


<html> 
<body> 
<script type="text/javascript"> 
var numVar=2; 
Var numVarl=0.5; 
var numVar2=-0.6; 
Var numVar3=17 


document .write("2、0.5、-0.6、 1 中 最 大 的 值 为 : "+ Math.max (numVar, 
numVarl,numVar2,numVar3) + "<br />") 

document .write("2、0.5、-0.6、 1 中 最 小 的 值 为 : "+ Math .min (numVar, 
numVarl,numVar2,numVar3) + "<br />") 
</script> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 19-11 所 示 。 
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图 19-10 计算 数值 的 绝对 值 19-11 返回 参数 中 的 最 大 值 或 最 小 值 
3. 计算 指定 数值 的 平方 根 
使 用 sqrt0 方法 可 返回 一 个 数 的 平方 根 。 其 语法 结构 如 下 。 


Math.sqrt (x) 


其 中 参数 x 为 必 选 项 ， 且 必须 是 大 于 等 于 0 的 数 。 计 算 结 果 的 返回 值 是 参数 x 的 平方 
根 。 如 果 x 小 于 0， 则 返回 NaN。 
【 例 19.12】 计算 指定 数值 的 平方 根 (实例 文件 ，ch19\19.12.html)。 


<html> 
<body> 
<script type="text/javascript"> 


- 398 


Var numVar=2; 
Var numVarl=0.5; 
Var numVar2=-0.6; 
Var numVar3=1; 


document. 
document. 
document. 
document. 
</script> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 19-12 所 示 。 
4. 进行 数值 的 辕 运 算 


使 用 pow0 方 法 


Math .pow (x, y) 


其 中 参数 x 为 必 选 项 ， 是 底数 ， 且 必须 是 数字 ; y 也 为 必 选 项 ， 是 寡 数 ， 且 必须 是 数字 。 
rd 如 果 结 果 是 虚数 或 负数 ， 则 该 方法 将 返回 NaN。 如 果 由 于 指数 过 大 而 引起 浮 点 溢 
出 ， 则 该 方法 将 返回 Infinity。 
数值 的 窘 运算 (实例 文件 ，ch19\19.13.html)。 


也 提示 
BD 


【 例 19.13】 


<html> 
<body> 


write ("2 的 平方 根 为 : "+ Math. sqrt (numVar) + "<br />") 
write ("0.5 的 平方 根 为 : "+ Math. sqrt (numVarl) + "<br />") 
write("-0.6 的 平方 根 为 : "+ Math. sqrt (numVar2) + "<br />") 
write ("1 的 平方 根 为 : "+ Math. sqrt (numVar3) + "<br />") 


可 返回 x 的 y 次 索 的 值 。 其 语法 结构 如 下 。 


轴 妾 项 圣 一 员 翌 忆 卉 下 1duoSeAer 性 61 潜 鲁 


<script type="text/javascript"> 


document. 
.write ("0 的 1 次 究 为 : "+Math.pow(0,1) + "<br />") 


document 


document. 
document. 
document. 
-write("-2 的 3 次 寡 为 : "+Math.pow(-2,3) + "<br />") 


document 


document. 
document. 


</script> 
</body> 
</html> 


write ("0 的 0 次 宕 为 ; "+ Math.pow(0,0) + "<br />") 


write ("1 的 1 次 军 为 : "+Math.pow(1,1) + "<br />") 
write ("1 的 10 次 究 为 : "+Math.pow(1,10) + "<br />") 
write ("2 的 3 次 宕 为 : "+Math.pow(2,3) + "<br />") 


write ("2 的 4 次 宕 为 : "+Math.pow(2,4) + "<br />") 
write("-2 的 4 次 徊 为 : "+Math.pow(-2,4) + "<br />") 


在 正 9.0 中 浏览 效果 如 图 19-13 所 示 。 
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5. 计算 指定 数值 的 对 数 
使 用 log0 方法 可 返回 一 个 数 的 自然 对 数 。 其 语法 结构 如 下 。 


Math.1log (x) 


其 中 参数 x 为 必 选 项 ， 可 以 是 任意 数值 或 表达 式 。 其 返回 值 为 x 的 自然 对 数 。 


@F 参数 x 必须 大 于 0。 
注 
【 例 19.14】 计算 指定 数值 的 对 数 (实例 文件 ，ch19\19.14.html)。 
<html> 
<body> 


<script type="text/javascript"> 
document .write ("2.7183 的 对 数 为 : "+ Math.log(2.7183) + "<br />") 
document .write("2 的 对 数 为 : "+ Math.10g(2) + "<br />") 
document .write ("1 的 对 数 为 : "+ Math.1log(1) + "<br />") 
document .write ("0 的 对 数 为 : "+Math.1og(0) + "<br />") 
document .write("-1 的 对 数 为 : "+Math. Log(=L)y 


</script> 

</body> 

</html> 

在 正 9.0 中 浏览 效果 如 图 19-14 所 示 。 
6. 进行 取 整 运算 


使 用 round0 方法 可 把 一 个 数字 舍 入 为 最 接近 的 整数 。 其 语法 结构 如 下 。 


Math .round (x) 
其 中 参数 x 为 必 选 项 ， 且 必须 是 数字 。 参 数 的 返回 值 是 与 x 最 接近 的 整数 。 


Se 对 于 0.5， 该 方法 将 进行 上 舍 入 。 例 如 ，3.5 将 舍 入 为 4， 而 -3.5 将 使 入 为 -3。 
< 


【 例 19.15】 取 整 运算 (实例 文件 ，ch19\19.15.htm])。 


<html> 

<body> 

<script type="text/javascript"> 
document .write ("0.60 取 整 后 的 数值 为 : "+Math.round(0.60) + "<br />") 
document .write ("0.50 取 整 后 的 数值 为 : "+Math.round(0.50) + "<br />") 
document .write ("0.49 取 整 后 的 数值 为 : "+Math.round(0.49) + "<br />") 
document .write("-4.40 取 整 后 的 数值 为 : "+Math.round(-4.40) + "<br />") 
document .write("-4.60 取 整 后 的 数值 为 : "+Math.round(-4.60)) 

</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 19-15 所 示 。 
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19-14 ”计算 对 数 图 19-15 ” 取 整 运算 
7. 生成 0 到 1 之 间 的 随机 数 
使 用 random0) 方法 可 返回 介 于 0 一 1 之 间 的 一 个 随机 数 。 其 语法 格式 如 下 。 


Math.random() 


其 返回 值 为 0.0 一 1.0 之 间 的 一 个 随机 数 。 
【 例 19.16】 生成 0 到 1 之 间 的 随机 数 (实例 文件 : ch19\19.16.htmD。 


<html> 

<body> 

<script type="text/javascript"> 
document .write ("0 到 1 之 间 的 第 一 次 随机 数 为 : "+Math.random()+ "<br />") 
document .write ("0 到 1 之 间 的 第 二 次 随机 数 为 : "+Math.random()+ "<br />") 
document .write("0 到 1 之 间 的 第 三 次 随机 数 为 "+Math . random()) 

</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 19-16 所 示 。 
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19.3 日 期 对 象 


在 JavaScript 中 ， 虽 然 没 有 日 期 类 型 的 数据 ， 但 是 在 开发 过 程 中 经 常会 处 理 日 期 。 因 此 ， 
JavaScript 提供 了 日 期 (Date) 对 象 来 操作 日 期 和 时 间 。 


19.3.1 案例 7 一 一 创建 日 期 对 象 


在 JavaScript 中 ， 创 建 日 期 对 象 必须 使 用 new 语句 。 使 用 关键 字 new 新 建 日 期 对 象 时 ， 
可 以 使 用 下 述 4 种 方法 。 
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方法 一 : 日 期 对 象 =New Date() 

方法 二 : 日 期 对 象 =New Date (日 期 字 串 ) 

方法 三 : 日 期 对 象 =New Date (年 ,月 ,日 [时 ,分 , 秒 , [毫秒 ] ]) 

方法 四 : 日 期 对 象 =New Date (毫秒 ) 

上 述 4 种 创建 方法 的 区 别 如 下 。 

(1) 方法 一 创建 了 一 个 包含 当前 系统 时 间 的 日 期 对 象 。 

(2) 方法 二 可 以 将 一 个 字符 串 转 换 成 日 期 对 象 ， 这 个 字符 串 可 以 是 只 包含 日 期 的 字符 串 ， 
也 可 以 是 既 包 含 日 期 又 包含 时 间 的 字符 串 。JavaScript 对 日 期 格式 有 要 求 ， 通 常 使 用 的 格式 有 
以 下 两 种 。 

@ 日 期 字符 串 可 以 表示 为 "月 日 ,年 小 时 :分 钟 : 秒 钟 "， 其 中 月 份 必须 使 用 英文 单词 ， 而 

其 他 部 分 可 以 使 用 数字 表示 ， 日 和 年 之 间 一 定 要 有 逗号 (,)。 
e ”日 期 字符 串 可 以 表示 为 "年 /月 /日 小 时 :分 钟 : 秒 钟 "， 所 有 部 分 都 要 求 使 用 数字 ， 年 份 
要 求 使 用 四 位 ， 月 份 用 0 至 11 的 整数 ， 代 表 1 月 到 12 月 。 

(3) 方法 三 通过 指定 年 月 日 时 分 秒 创建 日 期 对 象 ， 时 分 秒 都 可 以 省 略 。 月 份 用 0 至 11 的 
整数 ， 代 表 1 月 到 12 月 。 

(4) 方法 四 使 用 毫秒 来 创建 日 期 对 象 。 可 以 把 1970 年 1 月 1 日 0 时 0 分 0 秒 0 毫秒 看 成 
一 个 基数 ， 而 给 定 的 参数 代表 距离 这 个 基数 的 毫秒 数 。 如 果 指 定 参数 毫秒 为 3000， 则 该 日 期 
对 象 中 的 日 期 为 1970 年 1 月 1 日 0 时 0 分 3 秒 。 

下 面 的 实例 将 分 别 使 用 上 述 4 种 方法 创建 日 期 对 象 。 

【 例 19.17】 创建 日 期 对 象 (实例 文件 ，ch19\19.17.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 创 建 日 期 对 象 </title> 

<script> 

// 以 当前 时 间 创 建 一 个 日 期 对 铺 

Var myDatel=new Date() 

// 将 字符 串 转 换 成 日 期 对 象 ， 该 对 象 代表 日 期 为 2010 年 6 月 10 日 

Var myDate2=new Date("June 10,2010"); 

// 将 字符 串 转换 成 日 期 对 象 ， 该 对 象 代表 日 期 为 2010 年 6 月 10 日 

var myDate3=new Date("2010/6/10"); 

// 创 建 一 个 日 期 对 象 ， 该 对 象 代表 日 期 和 时 间 为 2011 年 10 月 19 日 16 时 16 分 16 秒 

Var myDate4=new Date(2011,10,19,16,16,16); 

// 创 建 一 个 日 期 对 象 ， 该 对 象 代表 距离 1970 年 1 月 1 日 0 时 0 分 0 秒 的 时 间 

Var myDate5=new Date (20000) 7 

// 分 别 输出 以 上 日 期 对 象 的 本 地 格式 

document .write ("myDatel 所 代表 的 时 间 为 : "+myDatel .toLocaleString()+"<br>") ; 
document .write ("myDate2 所 代表 的 时 间 为 : "+myDate2.toLocalestring()+"<br>"); 
document .write ("myDate3 所 代表 的 时 间 为 : "+myDate3.toLocalestring()+"<br>"); 
document .write ("myDate4 所 代表 的 时 间 为 : "+myDate4.toLocalestring()+"<br>"); 
document .write ("myDate5 所 代表 的 时 间 为 : "+myDate5.toLocalestring()+"<br>"); 
</script> 

</head> 

<body> 

</body> 

</html> 
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在 正 9.0 中 浏览 效果 如 


图 19-17 所 示 。 
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19.3.2 ”案例 8 一 一 日 期 对 象 常用 方法 的 应 用 


日 期 对 象 的 方法 主要 分 为 三 大 组 : setXxx、getXxx 和 toXxx。setXxx 组 的 方法 用 于 设置 
时 间 和 日 期 值 ，getXxx 组 的 方法 用 于 获取 时 间 和 日 期 值 ，toXxx 组 的 方法 用 于 将 日 期 转换 成 
指定 格式 。 日 期 对 象 的 方法 如 表 19-5 所 示 。 


TL 


Date 日 期 对 象 只 包含 两 个 属性 ， 分 别 是 constructor 和 prototype， 因 为 这 两 个 属性 
汇 ”在 每 个 内 部 对 象 中 都 有 ， 前 面 在 讲 字符 串 对 象 时 已 经 讲 过 ， 这 里 不 再 丙 述 。 


图 19-17 创建 日 期 对 象 
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表 19-5 日 期 对 象 的 方法 


方法 描 述 
Date 返回 当前 的 日 期 和 时 间 
getDate 从 _Date 对 象 返 回 一 个 月 中 的 某 一 天 (一 31) 
getDa 从 Date 对 象 返 回 一 周 中 的 某 一 天 (0 一 6) 
getMonth， 从 Date 对 象 返 回 月 份 (0 一 11) 
getFullYearl 从 Date 对 象 以 四 位 数字 返回 年 份 
getYear() 请 使 用 getFullYear0 方 法 代替 
getHours() 返回 Date 对 象 的 小 时 (0 一 23) 
getMinutes() 返回 Date 对 象 的 分 钟 (0 一 59) 
getSeconds() 返回 Date 对 象 的 秒 数 (0 一 59) 
getMilliseconds() 返回 Date 对 象 的 毫秒 数 (0 一 999) 
getTime0 返回 1970 年 1 月 1 日 至 今 的 毫秒 数 
getTimezoneOffset|) 返回 本 地 时 间 与 格林 尼 治 标准 时 间 (GMT) 的 分 钟 差 
getUTCDate() 根据 世界 时 从 _ Date 对 象 返回 月 中 的 一 天 (1~31) 
getUTCDayO 根据 世界 时 从 _ Date 对象 返回 周 中 的 一 天 (0 一 9) 
getUTCMonth() 根据 世界 时 从 Date 对 象 返回 月 份 (0 一 11) 
getUTCFullYear() 根据 世界 时 从 _Date 对 象 返回 四 位 数 的 年 份 
getUTCHoursO 根据 世界 时 返回 Date 对 象 的 小 时 (0 一 23) 
getUTCMinutes 根据 世界 时 返回 Date 对 象 的 分 钟 (0 一 59) 
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续 表 

方 法 描述 
getUTCSecondsO 根据 世界 时 返回 Date 对 象 的 秒 钟 (0 一 59) 
getUTCMillisecondsO) 根据 世界 时 返回 Date 对 象 的 毫秒 (0 一 999) 
parsei 返回 1970 年 1 月 1 日 午夜 到 指定 日 期 (字符 串 ) 的 毫秒 数 
setDate() 设置 Date 对 象 中 月 的 某 一 天 (1 ~31) 
setMonthO) 设置 Date 对 象 中 的 月 份 0~ 11) 
setFullYearl 设置 Date 对 象 中 的 年 份 (四 位 数字 ) 
setYear() 请 使 用 setFullYear0 方法 代替 
setHours() 设置 Date 对 象 中 的 小 时 (0 ~ 23) 
setMinutes' 设置 Date 对 象 中 的 分 钟 (0 ~ 59) 
setSeconds 设置 Date 对 象 中 的 秒 钟 (0 ~ 59) 
setMilliseconds' 设置 Date 对 象 中 的 毫秒 (0 ~ 999) 
setTimel 以 毫秒 设置 Date 对 象 
setUTCDate 根据 世界 时 设置 Date 对 象 中 月 份 的 一 天 (1 ~ 31) 
setUTCMonth() 根据 世界 时 设置 Date 对 象 中 的 月 份 (0~ 11) 
setUTCFullYear 根据 世界 时 设置 Date 对 象 中 的 年 份 (四 位 数字 ) 
setUTCHours 根据 世界 时 设置 Date 对 象 中 的 小 时 (0 ~ 23) 
setUTCMinutes 根据 世界 时 设置 Date 对 象 中 的 分 钟 (0 ~ 59) 
setUTCSeconds' 根据 世界 时 设置 Date 对 象 中 的 秒 钟 (0 ~ 59) 
setUTCMillisecondst 根据 世界 时 设置 Date 对 象 中 的 毫秒 (0 ~ 999) 
toSourcel 返回 该 对 象 的 源 代 码 
toString() 把 Date 对 象 转换 为 字符 串 
toTimeString 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toDateString() 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
toGMTString() 请 使 用 toUTCString0 方法 代替 
toUTCString() 根据 世界 时 ， 把 Date 对 象 转换 为 字符 串 
toLocaleString 根据 本 地 时 间 格 式 ， 把 Date 对象 转换 为 字符 串 
toLocaleTimeStringO 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toLocaleDateString() 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
UTCO 根据 世界 时 返回 1997 年 1 月 1 日 到 指定 日 期 的 毫秒 数 
valueOf0 返回 Date 对 象 的 原始 值 


在 表 19-5 中 ， 读 者 会 发 现 ， 将 日 期 转换 成 字符 串 的 方法 ， 要 么 就 是 将 日 期 对 象 中 的 日 期 
转换 成 字符 串 ， 要 么 就 是 将 日 期 对 象 中 的 时 间 转 换 成 字符 串 ， 要 么 就 是 将 日 期 对 象 中 的 日 期 
和 时 间 一 起 转换 成 字符 串 。 并 且 ， 这 些 方法 转换 成 的 字符 串 格式 无 法 控制 ， 例 如 ， 将 日 期 转 
换 成 2010 年 6 月 10 日 的 格式 ， 以 上 方法 就 无 法 做 到 。 

从 JavaScript1.6 开始 添加 了 一 个 toLocaleFormat(0 方 法 ， 该 方法 可 以 有 选择 地 将 日 期 对 象 


中 的 某 个 或 某 些 部 分 转换 成 字符 串 ， 也 可 以 指定 转换 的 字符 串 格 式 。toLocaleFormat( 方 法 的 
语法 如 下 。 
日 期 对 象 .toLocaleFormat (formatString) 


参数 formatString 为 要 转换 的 日 期 部 分 字符 ， 这 些 字符 及 含义 如 表 19-6 所 示 。 
表 19-6 日 期 的 部 分 字符 


格式 字符 说 明 

%a 显示 日 期 的 缩写 ， 显 示 方式 由 本 地 区 域 设置 

%A 显示 星期 的 全 称 ， 显 示 方式 由 本 地 区 域 设 置 

%b 显示 月 份 的 缩写 ， 显 示 方式 由 本 地 区 域 设置 

%B 显示 月 份 的 全 称 ， 显 示 方式 由 本 地 区 域 设置 

%c 显示 日 期 和 时 间 ， 显 示 方 式 由 本 地 区 域 设置 

%d, 以 2 位 数 的 形式 显示 月 份 中 的 某 一 日 ，01 一 31 

%H 以 2 位 数 的 形式 显示 小 时 ，24 小 时 制 ，00 一 23 

%l 以 2 位 数 的 形式 显示 小 时 ，12 小 时 制 ，01 一 12 

%j 以 3 位 数 的 形式 显示 一 年 中 的 第 几 天 ，001 一 366 

%m 以 2 位 数 的 形式 显示 月 份 ，01 一 12 

%M 以 2 位 数 的 形式 显示 分 钟 ，00 一 59 

% 本 地 区 域 设置 的 上 午 或 者 下 午 

%S 以 2 位 数 的 形式 显示 秒 钟 ，00 一 59 

%U 以 2 位 数 的 形式 显示 一 年 中 的 第 几 周 ，00 一 53( 星 期 天 为 一 周 的 第 一 天 ) 

ow 显示 一 周 中 的 第 几 天 ，0 一 6( 星 期 天 为 一 周 的 第 一 天 ，0 为 星期 天 ) 

i 以 2 位 数 的 形式 显示 一 年 中 的 第 几 周 ，00~53( 星 期 一 为 一 周 的 第 一 天 ， 一 年 中 的 第 一 个 
星期 一 认为 是 第 0 周 ) 

x 显示 日 期 ， 显 示 方式 由 本 地 区 域 设置 

%X 显示 时 间 ， 显 示 方式 由 本 地 区 域 设置 

%y 以 2 位 数 的 形式 显示 年 份 

%Y 以 4 位 数 的 形式 显示 年 份 

%Z 如 果 时 区 信息 不 存在 ， 则 被 时 区 名 称 、 时 区 简称 或 者 被 无 字 节 蔡 换 

9%69%6 显示 % 


下 面 实例 将 日 期 对 象 以 YYYY-MM-DD PM H:M:S 星期 X 的 格式 显示 。 
【 例 19.18】 自 定义 格式 输出 日 期 (实例 文件 ， ch19\19.18.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 创 建 日 期 对 象 </title> 
<script> 


Var now=new Date(); // 定 义 日 期 对 象 
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网 页 设计 与 网 站 建设 
案例 课堂 ~ 


// 输 出 自 定义 的 日 期 格式 

document .write ("今天 是 : "+now. toLocaleFormat ("%Y-%m-%d SP SH:SM:%S Sa™); 

</script> 

</head> 

<body> 

</body> 

</html> 

由 于 toLocaleFormat() 方 法 是 JavaScript1.6 新 增加 的 功 
能 ， 正 、Opera 等 浏览 器 都 不 支持 ，Firefox 浏览 器 完全 支 


持 ， 网 页 预览 结果 如 图 19-18 所 示 。 
19.3.3 ”案例 9 一 一 日 期 对 象 间 的 运算 

日 期 对 象 之 间 的 运算 通常 包括 一 个 日 期 对 象 加 上 整数 
的 年 、 月 或 日 ， 两 个 日 期 对 象 相 减 等 。 

1. 日 期 对 象 与 整数 年 、 月 或 日 相 加 


日 期 对 象 与 整数 年 、 月 或 日 相 加 ， 需 要 将 它们 相 加 的 结果 ， 通 过 setXxx 函数 设置 成 新 的 
日 期 对 象 ， 语 法 格式 如 下 。 
date.setDate (date.getDate()+value) // 增 加 天 


date.setMonth (date.getMonth ()+value); // 增 加 月 
date.setFullYear (date.getFullYear ()+value); // 增 加 年 


今天 是 ，2011-07-17 上 午 11:57:27 星期 日 


19-18” 自 定义 格式 输出 日 期 


2. 日 期 对 象 相 减 


JavaScript 中 人 允许 两 个 日 期 对 象 相 减 ， 相 减 之 后 将 会 返回 这 两 个 日 期 之 间 的 毫秒 数 。 通 常 
会 将 毫秒 转换 成 秒 、 分 、 小 时 、 天 等 。 例 如 ， 下 面 的 程序 段 实 现 了 两 个 日 期 的 相 减 ， 并 会 将 
结果 分 别 转换 成 秒 、 分 、 小 时 和 天 。 

【 例 19.19】 日 期 相 减 (实例 文件 ，ch19\19.19.html)。 


<html> 

<head> 

<title> 创 建 日 期 对 象 </title> 

<script> 

var now=new Date();  ”// 以 当前 的 时 间 定 义 日 期 对 象 

var nationalDay=new Date(2015,10,1,0,0,0); // 以 2015 年 国庆 节 定 义 日 期 对 象 
var msel=nationalDay-now // 相 差 毫秒 数 

// 输 出 相差 时 间 

document .write ("距离 2015 年 国庆 节 还 有 : "+msel+" 毫 秒 <br>"); 

document .write ("距离 2015 年 国庆 节 还 有 : "+parseInt (msel1/1000) +" 秒 <br>") 
document .write ("距离 2015 年 国庆 节 还 有 : "+parseInt (msel1/ (60*1000) ) +" 分 钟 <br>") ; 
document .write ("距离 2015 年 国庆 节 还 有 : "+parseInt (msel/ (60*60*1000) ) +" 小 时 
<br>")s 

document .write ("距离 2015 年 国庆 节 还 有 : "+parseInt (msel/ (24*60*60*1000) ) +" 天 
<br>")? 

</script> 

</head> 

<body> 


</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 19-19 所 示 。 


图 19-19 日 期 对 象 相 减 运行 结果 
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19.4 数组 对 象 


数组 是 具有 相同 数据 类 型 的 变量 集合 ， 这 些 变量 都 可 以 通过 索引 进行 访问 。 数 组 中 的 变 
量 称 为 数组 的 元 素 ， 数 组 能 够 容纳 元 素 的 数量 称 为 数组 的 长 度 。 数 组 中 的 每 个 元 素 都 具有 唯 
一 的 索引 (或 称 为 下 标 ) 与 其 相对 应 ， 在 JavaScript 中 数组 的 索引 从 零 开始 。 


19.4.1 案例 10 一 一 创建 数组 与 访问 对 象 


Array 对 象 是 常用 的 内 置 动作 脚本 对 象 ， 它 将 数据 存储 在 已 编号 的 属性 中 ， 而 不 是 已 命名 
的 属性 中 。 数 组 元 素 的 名 称 叫 作 索引 。 数 组 用 于 存储 和 检索 特定 类 型 的 信息 ， 如 学 生 列 表 或 
游戏 中 的 一 系列 移动 。Array 对 象 类 似 String 和 Date 对 象 ， 需 要 使 用 new 关键 字 和 构造 函数 
来 创建 。 

可 以 在 创建 一 个 Array 对 象 时 初始 化 它 : 

myArray=new Rrray() 


myArray=new Array([size]) 
myArray=new Array([element0[,elementl[,...[, elementN]]]]) 


其 中 各 个 参数 的 含义 如 下 。 

@ ”size: 可 选 ， 指 定 一 个 整数 表示 数组 的 大 小 。 

@ ”element0,…,elementN: 可 选 ， 为 要 放 到 数组 中 的 元 素 。 创 建 数组 后 ， 能 够 用 [ ] 符 
号 访问 数组 单个 元 素 。 

有 上 述 可 知 ， 创 建 数组 对 象 有 以 下 3 种 方法 。 

(1) 新 建 一 个 长 度 为 零 的 数组 。 


var 数组 名 =new Array( ); 
例如 ， 声 明 数组 为 myArl， 长 度 为 0， 代码 如 下 。 


Var myArrl=new Array(); 


(2) 新 建 一 个 长 度 为 n 的 数组 。 


var 数组 名 =new Array (n); 
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网 页 设计 与 网 站 建设 
案例 课堂 ~ 


例如 ， 声 明 数 组 为 myAr2， 长 度 为 6， 代码 如 下 。 


Var myArr2=new Array(6); 


(3) 新 建 一 个 指定 长 度 的 数组 ， 并 赋值 。 


var 数组 名 =new Array (元 素 1, 元 素 2, 元素 3,…); 


例如 ， 声 明 数 组 为 myArr3， 并 且 分 别 赋值 为 1、2、3、4， 代 码 如 下 。 


Var myArr3=new Array(l1,2,3,4); 

上 面 这 一 行 代码 创建 了 一 个 数组 myArr3， 并 且 包 含 4 个 元 素 myArr3[0]、myArr3[1]、 
myArr3[2]、myArr3[3]， 这 4 个 元 素 值 分 别 为 1、2、3、4。 

【 例 19.20】 ”构造 一 个 长 度 为 5 的 数组 ， 为 其 添加 元 素 后 ， 使 用 for 循环 语句 枚 举 其 元 
素 ( 实 例文 件 ， ch19\19.20.html)。 


<!DOCTYPE HTML> 
<html> 
<head> 
<script language=JavaScript> 
myArray=new Array(5); 
myArray[0]="a"; 
myArray[1]=". 
myArray[2]="c"; 
myArray[3]="d"; 
myArray[4]="e"; 
GP (OF < 5 tT 
document .write (myArray [i]+"<br>"); 
</script> 
<META content="MSHTML 6.00.2900.5726" name=GENERATOR> 
</head> 
<body> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 19-20 所 示 。 画 | 

只 要 构造 了 一 个 数组 ， 就 可 以 使 用 中 括号 “[ ]”， 通 no do 
过 索引 和 位 置 ( 它 也 是 基于 0 的 ) 来 访问 它 的 元 素 。 每 个 数 。 | 2 sa sw wes Tam ww 
组 对 象 实体 也 可 以 看 作 是 一 个 对 象 ， 因 为 每 个 数组 都 是 由 | 
它 所 包含 的 若干 个 数组 元 素 组 成 的 ， 每 个 数组 元 素 都 可 以 ”| : 
看 作 是 这 个 数组 对 象 的 一 个 属性 ， 可 以 用 表示 数组 元 素 位 
置 的 数字 来 标识 。 也 就 是 说 数组 对 象 使 用 数组 元 素 的 下 标 
来 进行 区 分 ， 数 组 元 素 的 下 标 从 零 开始 索引 ， 第 一 个 下 标 图 19-20 “显示 构造 的 数组 
为 0， 后 面 依次 加 1。 访 问 数据 的 语法 格式 如 下 。 


document .write (mycars[0]) 


【 例 19.21】 使 用 方 括号 访问 并 直接 构造 数组 (实例 文件 : ch19\19.21.html)。 


<!1DOCTYPE HTML> 
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<html> 
<head> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<script language=JavaScript> 
myAarray=Tl "al "bl el lr a2 bo a3" D3 edi 
for (var i=0; i <= 2; i++){ 
document .write( myArray[i]) 
document .write ("<br>"); 
} 
document .write ("<hr>"); 
for (i=0;i<3;i++){ 
for (j=0;j<3;j++){ 
document .write (myArray[i] [j]+" "); 


} 
document .write ("<br>"); 
} 
</script> 
<META content="MSHTML 6.00.2900.5726" name=GENERATOR> 
</head> 
<body> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 19-21 所 示 。 
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19-21 ”访问 构造 的 数组 


19.4.2 ”案例 11 一 一 数组 对 象 属性 的 应 用 


JavaScript 提供 了 一 个 Array 内 部 对 象 来 创建 数组 ，Array 对 象 的 属性 主要 有 两 个 ， 分 别 
是 length 属性 和 prototype 属性 ， 下 面 将 详细 介绍 这 两 个 属性 。 


1. length 


该 属性 的 作用 是 获得 数组 的 长 度 ， 当 将 新 元 素 添加 到 数组 时 ， 此 属性 会 自动 更 新 。 其 语 
法 格式 如 下 。 


my_array.length 


【 例 19.22】 更 新 length 属性 (实例 文件 : ch19\19.22.html)。 


<!DOCTYPE HTML> 
<html> 
<head> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 


网 页 设计 与 网 站 建设 
案例 课堂 ~ 


<script language=Javascript> 
my array = new Array(); 
document .write (my array.length+"<br>"); // 初始 长 度 为 0 


my array[l0] = "a's? 
document .write (my array.length+"<br>"); // 将 长 度 更 新 为 1 
my array[1l] = "b's 
document .write (my array.length+"<br>"); // 将 长 度 更 新 为 2 
my_array[9] = 'c'; 
document .write (my array.length+"<br>"); // 将 长 度 更 新 为 10 

</script> 

</head> 

<body> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 19-22 所 示 。 


2. prototype 


该 属性 是 所 有 JavaScript 对 象 所 共有 的 属性 ， 和 Date 对 象 的 prototype 属性 一 样 ， 其 作用 
为 将 新 定义 的 属性 或 方法 添加 到 Array 对 象 中 ， 该 对 象 的 实例 就 可 以 调用 该 属性 或 方法 。 其 
语法 格式 如 下 。 


Array.prototype.methodName=functionName 


其 中 各 个 参数 的 作用 说 明 如 下 。 

@ methodName: 必 选 项 ， 新 增 方法 的 名 称 。 

@ ”functionName: 必 选 项 ， 要 添加 到 对 象 中 的 函数 名 称 。 
【 例 19.23】 删除 数组 中 的 数据 (实例 文件 : ch19\19.23.html)。 


<!DOCTYPE HTML> 
<html> 
<head> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<script> 
// 添 加 一 个 属性 ， 用 于 统计 删除 的 元 素 个 数 
Array.prototype.removed=0; 
// 添 加 一 个 方法 ， 用 于 删除 指定 索引 的 元 素 
Array.prototype.removeAt=function (index) 
{ 
if(isNaN(index) ||index<0) 
{return false;} 
if (index>=this.length) 
{index=this.length-1} 
Eor (var i=index;i<this.length;i++) 
this[i]l=this[i+l]7 
} 
this.length-=1 
this.removed++; 


// 添 加 一 个 方法 ， 输 出 数组 中 的 全 部 数据 


Array.prototype.outPut=function (sp) 


for (Var i=0;i<this.length;i++) 
中 
document .write (this[i]); 
document .write (sp); 
} 


document .write ("<br>"); 


} 
// 定 义 数 组 
Var arr=new Array(l,2,3,4,5,6,7,8,9); 
// 测 试 添加 的 方法 和 属性 
arr.outPut(™" "); 
document .write ("删除 一 个 数据 <br>") 5 
arr.removeAt (2); 
arr.outPut(™" "); 
arr.removeAt (4); 
document .write( "删除 一 个 数据 <br>") 这 
arr.outPut ("”") 
document .write ("一 共 删 除了 "+arr .removed+" 个 数据 ") ; 
</script> 
</head> 
<body> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 19-23 所 示 。 
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图 19-22 ”给 数组 指定 相应 的 整数 图 19-23 ”删除 数组 中 的 数据 
这 段 代 码 利用 prototype 属性 分 别 向 Array 对 象 中 添加 了 两 个 方法 和 一 个 属性 ， 分 别 实现 
了 删除 指定 索引 处 的 元 素 、 输 出 数组 中 的 所 有 元 素 和 统计 删除 元 素 个 数 的 功能 。 
19.4.3 ”案例 12 一 一 数组 对 象 常 用 方法 的 应 用 
在 JavaScript 当中 ， 数 组 对 象 的 常用 方法 有 14 种 。 下 面 介 绍 几 种 常用 数组 对 象 方法 的 使 用 。 
1. 连接 其 他 数组 到 当前 数组 


使 用 concat0 方 法 可 以 连接 两 个 或 多 个 数组 。 该 方法 不 会 改变 现 有 的 数组 ， 而 仅仅 会 返回 
被 连接 数组 的 一 个 副本 。 其 语法 格式 如 下 。 


arrayObject.concat (arrayl,array2, ...,arrayN) 


其 中 arrayN 是 必 选 项 ， 该 参数 可 以 是 具体 的 值 ， 也 可 以 是 数组 对 象 ， 可 以 是 任意 多 个 。 
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【 例 19.24】 使 用 concat() 方 法 连接 3 个 数组 (实例 文件 : ch19\19.24.html)。 


<html> 

<body> 

<script type="text/javascript"> 
Var arr = new Array(3) 


ezL0N = 北京 < 
arr[1] = ”上 海 ” 
arr[2] = "广州 " 
Var arr2 = new Array (3) 
arr2lol 
arr2[1] = "天 津 " 
arr2[2] = "杭州 " 
Var arr3 = new Rrray(2) 
arr3[0] = "长 沙 " 


arr3[1] = "温州 " 

document .write (arr.concat (arr2,arr3)) 
</script> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 19-24 所 示 。 
2. 将 数组 元 素 连接 为 字符 串 
使 用 join() 方 法 可 以 把 数组 中 的 所 有 元 素 放 入 一 个 字符 串 。 其 语法 格式 如 下 。 


arrayObject .join(separator) 


其 中 separator 为 可 选项 ， 用 于 指定 要 使 用 的 分 隔 符 ， 如 果 省 略 该 参数 ， 则 使 用 逗号 作为 
分 隔 符 。 
【 例 19.25】 使 用 join() 方 法 将 数组 元 素 连接 为 字符 串 (实例 文件 : ch19\19.25.htmD)。 


<html> 

<body> 

<script type="text/javascript"> 
Var arr = new Array(3); 


arr[0] = "河北 " 
arr[1] = "石家庄 " 
arr[2] = "廊坊 " 


document .write (arr.join()); 
document .write("<br />"); 
document .write (arr.join(".")); 

</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 19-25 所 示 。 
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北京 ,上 海 ,广州 ,本 去 ,天 津 ,杭州 ,长 钞 , 温 州 


廊坊 


河北 ,石家庄 ， 
河北 .石家庄 .廊坊 


19-24 ”连接 其 他 数组 到 当前 数组 19-25 ”将 数组 元 素 连 接 为 字符 串 
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3. 移 除数 组 中 的 最 后 一 个 元 素 
使 用 pop0 方 法 可 以 移 除 并 返回 数组 中 的 最 后 一 个 元 素 。 其 语法 格式 如 下 。 
arrayObject .pop() 


Sm pop0 方 法 将 移 除 arrayObject 中 的 最 后 一 个 元 素 ， 把 数组 长 度 减 1， 并 且 返 回 它 移 
半 。 除 的 元 素 的 值 。 如 果 数 组 已 经 为 室 ， 则 pop0 不 改变 数组 ， 并 返回 undefined 值 。 


【 例 19.26】 使 用 pop0 方 法 移 除数 组 中 的 最 后 一 个 元 素 (实例 文件 ，ch19\19.26.html)。 


<html> 

<html> 

<body> 

<script type="text/javascript"> 
Var arr = new Array (3) 
arr[0] 时 
arrtil 
arr[2] = "洛阳 " 
document .write(" 数 组 中 原 有 元 素 : "+arr) 
document .write("<br />") 
document .write ("被 移 除 的 元 素 : "+arr.pop()) 
document .write("<br />") 
document .write(" 移 除 元 素 后 的 数组 元 素 : "+arr) 

</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 19-26 所 示 。 
4. 将 指定 的 数值 添加 到 数组 中 
使 用 push0 方 法 可 向 数组 的 末尾 添加 一 个 或 多 个 元 素 ， 并 返回 新 的 长 度 。 其 语法 格 
式 如 下 。 
arrayObject .push (newelementl],newelement2, ...,newelementN) 
其 中 arrayObject 为 必 选 项 ， 该 参数 为 数组 对 象 ， newelementl 为 可 选项 ， 表 示 添 加 到 数 
组 中 的 元 素 。 
5 pushO 方 法 可 以 把 它 的 参数 顺序 添加 到 arrayObject 的 尾部 。 它 直接 修改 
外 arrayObject， 而 不 是 创建 一 个 新 的 数组 。push( 方 法 和 pop0 方 法 使 用 数组 提供 的 先进 
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后 出 的 功能 。 
【 例 19.27】 使 用 push() 方 法 将 指定 数值 添加 到 数组 中 (实例 文件 : ch19\19.27.htmD) 。 
<html> 
<body> 


<script type="text/javascript"> 
Var arr = new Array (3) 


arr[0] = "河南 " 
arz[II] 三 "河北 * 
arr[2] = "江苏 " 
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document .write (" 原 有 的 数组 元 素 : "Farr) 
document .write("<br />") 
document .write ("添加 元 素 后 数组 的 长 度 : ”+arr.push ("吉林 ")) 
document .write("<br />") 
document .write ("添加 数值 后 的 数组 : " +arr) 
</script> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 19-27 所 示 。 


晤 kwuerwanreep- cx - | RE raser mirin P > 6x] 人 humwwdnne x 
XP WR EB CR TR WRI 


数组 中 原 有 元 大， 河南 ,郑州 .洛阳 i 原 有 的 部 组 元 素 ， 河 南 , 河 北江 荔 
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19-26 ” 移 除 数组 中 最 后 一 个 元 素 19-27 ”将 指定 数值 添加 到 数组 中 
5. 反 序 排列 数组 中 的 元 素 
使 用 reverse( 方 法 可 以 颠倒 数组 中 元 素 的 顺序 。 其 语法 格式 如 下 。 
arrayObject .reverse() 


5 该 方法 会 改变 原来 的 数组 ， 而 不 会 创建 新 的 数组 。 


【 例 19.28】 ”使 用 reverse0 方 法 颠倒 数组 中 的 元 素 顺序 (实例 文件 ，ch19\19.28.html)。 


<html> 

<body> 

<script type="text/javascript"> 
var arr = new Array (3) 


arr[0] = " 张 三 " 
arr[1] = " 李 四 " 
a 


document .write(arr + "<br />") 
document .write (arr.reverse()) 
</script> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 19-28 所 示 。 
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19.5 ”实战 演练 一 一 制作 网 页 随机 验证 码 


网 站 为 了 防止 用 户 利用 机 器 人 自动 注册 、 登 录 、 灌 水 ， 都 采用 了 验证 码 技术 。 所 谓 验证 
码 ， 就 是 将 一 串 随机 产生 的 数字 或 符号 生成 一 幅 图 片 ， 图 片 里 加 上 一 些 干扰 因素 (防止 
OCR)， 由 用 户 肉 眼 识别 其 中 的 验证 码 信 息 ， 输 入 表单 提交 网 站 验证 ， 验 证 成 功 后 才能 使 用 某 
项 功能 。 本 例 将 产生 一 个 由 n 位 数字 和 大 小 写字 母 构成 的 验证 码 。 

【 例 19.29】 ”随机 产生 一 个 由 n 位 数字 和 字母 组 成 的 验证 码 ， 如 图 19-29 所 示 。 单 击 
【刷新 】 按 钮 ， 重 新 产生 验证 码 ， 如 图 19-30 所 示 。 


Se 使 用 数学 对 象 中 的 随机 数 方法 random 和 字符 串 的 取 字 符 方法 charAt。 
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图 19-29 ”随机 验证 码 图 19-30 ”刷新 验证 码 

具体 操作 步骤 如 下 。 

EEC 创建 HIML 文件 ， 并 输入 如 下 代码 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 
<title> 随 机 验证 码 </title> 
</head> 

<body> 

<span id="msg"></span> 
<input type="button"” value=" 刷 新 "> 
</body> 

</html> 


Os span 标记 没有 什么 特殊 的 意义 ， 它 显示 某 行内 的 独特 样式 ， 在 这 里 主要 是 用 于 显 
放生 示 产 生 的 验证 码 。 为 了 保证 后 面 程序 的 正常 运行 ， 一 定 不 要 省 略 id 属性 及 修改 取 值 。 


EC 新 建 JavaScript 文件 ， 保 存 文件 名 为 getCode.js， 保 存在 与 HIML 文件 相同 的 位 
置 。 在 getCodejjs 文件 中 输入 如 下 代码 。 

/* 产 生 随机 数 函 数 */ 

function validateCode (n){ 
/* 验 证 码 中 可 能 包含 的 字符 */ 
Var s="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXY2Z0123456789"™; 
var ret=""; // 保 存 生 成 的 验证 码 
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/* 利 用 循环 ， 随 机 产生 验证 码 中 的 每 个 字符 */ 
forl(var i=0;i<n;i++) 


{ 
var index=Math.floor (Math.random()*62); // 随 机 产生 一 个 0 至 62 之 间 的 数字 


ret+=s.charAt (index); ”// 将 随机 产生 的 数字 当 作 字符 串 的 位 置 下 标 ， 在 字符 串 s 中 
取出 该 字符 ， 并 放 入 ret 中 


} 
return ret;  // 返 回 产生 的 验证 码 


} 
/* 显 示 随机 数 函 数 */ 


function show(){ 
document .getElementById("msg") .innerHTML=validateCode (4); 


// 在 id 为 msg 的 对 象 中 显示 验证 码 


} 
window.onload=show; ”// 页 面 加 载 时 执行 函数 show 


3 在 getCodejs 文件 中 ，validateCode 函数 主要 用 于 产生 指定 位 数 的 随机 数 ， 并 返 
放生 回 该 随机 数 ; show 函数 主要 用 于 调用 validateCode 函数 ， 并 在 id 为 msg 的 对 象 中 显 
” 。 示 随 机 数 ， 
在 show 函数 中 ，document 的 getElementById("msg") 函 数 使 用 DOM 模型 获得 对 象 ， 
innerHTML 属性 用 于 修改 对 象 的 内 容 。 
在 HTML 文件 的 head 部 分 ， 输 入 JavaScript 代码 ， 如 下 所 示 。 
<script src="getCode.js" type="text/javascript"></script> 
EED 在 HTML 文件 中 ， 修 改 【 刷 新 】 按 钮 的 代码 ， 修 改 <input type="button" value=" 
刷新 > 这 一 行 代码 ， 如 下 所 示 。 
<input type="button"” value=" 刷 新 ” onclick="show()" /> 
EEJR9 保存 网 页 后 ， 即 可 查看 最 终 效果 。 
@: 在 本 例 中 ， 使 用 了 两 种 方法 为 对 象 增加 事件 。 在 HIML 代码 中 增加 事件 ， 即 为 
i 【 刷新】 按钮 增加 onclick 事件 。 在 JavaScript 代码 中 增加 事件 ， 即 在 JavaScript 代码 
中 为 窗口 增加 onload 事件 。 


19.6” 跟 我 练 练 手 
19.6.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 


19.6.2 上 机 练习 


练习 1: 在 JavaScript 程序 中 使 用 字符 串 对 象 。 
练习 2: 在 JavaScript 程序 中 使 用 数学 对 象 。 


二 
G's 


练习 3: 在 JavaScript 程序 中 日 期 对 象 。 
练习 4: 在 JavaScript 程序 中 数组 对 象 。 


19.7 高 手 甜 点 


甜点 1: 如 何 产生 指定 范围 内 的 随机 整数 


在 实际 开发 中 ， 会 经 常 使 用 指定 范围 内 的 随机 整数 。 借 助 数学 方法 ， 总 结 出 以 下 两 种 指 
定 范 围 内 的 随机 整数 产生 方法 。 

(1) 产生 0 至 n 之 间 的 随机 数 : Math.floor(Math.randomO*(n+1))。 

(2) 产生 nl 至 n2 之 间 的 随机 数 : Math.floor(Math randomO*(n2-nl))+nl。 

甜点 2: 如 何 格式 化 alert 弹出 窗口 的 内 容 

使 用 alert 弹出 窗口 时 ， 窗 口内 容 的 显示 格式 可 以 借助 转 义 字符 进行 格式 化 。 如 果 和 希望 窗 
口内 容 按 指定 位 置换 行 ， 可 添加 转 义 字符 “mm”; 如 果 和 希望 转 义 字符 间 有 制 表 位 间隔 ， 可 使 
用 转 义 字符 “\t” 等 。 
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第 20 章 体现 设计 者 的 思想 一 一 使 用 Photoshop CS6 
进行 页 面 设计 

第 21 章 让 网 页 活灵活现 一 一 网 页 元 素 设计 基础 

第 22 章 网 页 的 标志 一 一 制作 网 站 Logo 与 Banner 

页 导航 条 

第 24 章 网 页 中 迷人 的 蓝海 一 一 制作 网 页 按钮 与 特效 
边线 

第 25 章 让 网 页 更 绚丽 一 一 制作 网 站 常用 动画 特效 

第 26 章 让 网 页 不 再 单调 
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CS6 作为 专业 的 图 形 图 像 处 理 软件 ， 是 许多 从 事 平 面 设计 工作 人 员 
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像 处 理 公 司 、 婚 纱 影 楼 以 及 网 页 设计 类 的 公司 等 。 本 章 就 来 介绍 如 何 使 用 
Photosho 进行 网 页 设 ? 


Photoshop 
的 必 备 工具 。 它 被 广泛 地 应 用 于 广告 公司 、 制 版 公司 、 输 出 中 心 、 印 
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20.1 熟悉 Photoshop 的 常用 工具 


在 Photoshop CS6 的 工具 箱 中 存在 着 大 量 操作 工具 。 通 过 这 些 工具 ， 可 以 进行 文字 、 选 
择 、 绘 画 、 绘 制 、 取 样 、 编 辑 、 移 动 、 注 释 、 查 看 图 像 等 操作 ， = 
还 可 以 更 改 前 景色 /背景 色 以 及 在 不 同 的 模式 下 工作 。 


20.1.1 案例 1 一 一 缩放 工具 的 使 用 


使 用 缩放 工具 可 以 实现 对 图 像 的 缩放 查看 ， 如 图 20-1 所 示 ， 
使 用 缩放 工具 拖 忠 出 想 要 放大 的 区 域 即 可 对 局 部 区 域 进行 放大 ， 
也 可 以 利用 快捷 键 来 实现 : 按 Ctrl++ 组 合 键 以 画布 为 中 心 放 大 
图 像 ， 按 Ctrl+- 组 合 键 ， 以 画布 为 中 心 缩 小 图 像 ， 按 Ctrlt0 组 
合 键 ， 以 满 画布 显示 图 像 ， 即 图 像 窗口 充满 整个 工作 区 域 。 


20.1.2 ”案例 2 一 一 抓 手 工具 的 使 用 图 20-1 缩放 工具 


当 图 像 放 大 到 窗口 中 只 能 够 显示 局 部 图 像 的 时 候 ， 如 果 需 要 查看 图 像 中 的 某 一 部 分 ， 方 
法 有 如 下 3 种 。 
e@ ”使 用 抓 手工 具 拖 电 图 像 。 
@ ”在 使 用 抓 手 工具 以 外 的 工具 时 ， 在 按 住 空格 键 的 同时 拖 
电 鼠 标 可 以 将 所 要 显示 的 部 分 图 像 在 图 像 窗 口中 显示 出 
来 。 
@ 可 以 拖 电 水 平 滚动 条 和 垂直 滚动 条 来 查看 图 像 。 
如 图 20-2 所 示 为 使 用 抓 手 工具 查看 部 分 图 像 。 


20.1.3 ”案例 3 一 一 选 框 工具 的 使 用 


选 框 工具 有 4 个， 分 别 是 ， 和 矩形 选 框 工具 、 椭 圆 选 框 工具 、 单 
行 选 框 工具 和 单列 选 框 工具 。 

(1) 矩 形 选 框 工具 国 : 主要 用 于 选择 矩形 的 图 像 ， 是 图 20-2 抓 手 工具 
Photoshop CS6 中 比较 常用 的 工具 。 使 用 该 工具 仅 限于 选择 规则 的 矩形 ， 不 能 选取 其 他 形状 ， 
如 图 20-3 所 示 。 

(2) 椭圆 选 框 工具 国 : 用 于 选取 贺 形 或 椭圆 的 图 像 ， 如 图 20-4 所 示 。 

(3) 单行 选 框 工具 国 : 用 于 选取 一 个 像素 大 小 的 单行 图 像 ， 如 图 20-5 所 示 。 

(4) 单列 选 框 工具 国 : 用 于 选取 一 个 像素 大 小 的 单列 图 像 ， 如 图 20-6 所 示 。 


bb 


图 20-5 单行 选 框 工具 图 20-6 单列 选 框 工具 
20.1.4 ”案例 4 一 一 钢笔 工具 的 使 用 


使 用 钢笔 工具 可 以 载 入 选区 ， 从 而 创建 选区 ， 具 体操 作 步骤 如 下 。 
EEDOD) 打开 随 书 光盘 中 的 素材 文件 ， 如 图 20-7 所 示 。 

区 TY 单 击 工具 箱 中 的 【钢笔 工具 】 按 钮 ， 单 击 属性 栏 中 的 【排除 重 县 形状】 按钮 
贺 ， 使 用 钢笔 工具 给 图 像 描 点 ， 如 图 20-8 所 示 。 


图 20-7 打开 素材 文件 图 20-8 使 用 钢笔 工具 


由 于 下 一 个 节点 在 转角 位 置 ， 需 要 将 上 个 点 的 方向 线 手柄 去 掉 ， 按 住 Alt 键 单 击 
上 一 个 描 点 ， 方 向 线 手 柄 清除 ， 如 图 20-9 所 示 。 

EEC 依照 上 述 步骤 继续 描 点 ， 如 果 描 点 错误 可 以 使 用 CtrltZ 组 合 键 撤销 操作 ， 或 者 
在 【历史 记录 】 模 板 中 选择 恢复 到 的 历史 记录 位 置 。 当 终点 和 起 点 重合 时 ， 鼠 标 指 
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针 右 下 角 有 一 个 圆圈 ， 单 击 即 可 闭合 路 径 ， 如 图 20-10 所 示 。 


= 


20-9 ”清除 方向 线 


20-10 ”闭合 路 径 


ED 打开 【路 径 】 面 板 ， 单 击 面板 下 方 的 【将 路 径 作为 选区 载 入 】 按 钮 国 ， 如 图 20-11 
所 示 。 


EGRD 路 径 变 成 蚂蚁 线 ， 选 区 生成 ， 如 图 20-12 所 示 。 


图 20-11 【路 径 】 面 板 


20.1.5 ”案例 5 一 一 套 索 工具 的 使 用 


20-12 ”生成 选区 


使 用 套 索 工 具 可 以 以 手绘 形式 随意 地 创建 选区 。 使 用 套 索 工具 创建 选区 的 操作 步骤 如 下 。 
打开 随 书 光 盘 中 的 素材 文件 ， 如 图 20-13 所 示 。 


EEIPy 选择 工具 箱 中 的 【 套 索 工具 】， 如 图 20-14 所 示 。 


EEIS) 单 击 图 像 上 的 任意 一 点 作为 起 始点 ， 按 住 鼠标 左 键 拖 忠 出 需要 选择 的 区 域 ， 到 
达 合 适 的 位 置 后 释放 鼠标 ， 选 区 将 自动 闭合 ， 如 图 20-15 所 示 。 


>, RN 
太守 素 I 具 上 
闪 而 性 大 素 工具 


图 20-13 ”打开 素材 文件 图 20-14 ”选择 套 索 工具 


图 20-15 生成 选区 
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20.1.6 ”案例 6 一 一 多 边 形 套 索 工 具 的 使 用 


使 用 多 边 形 套 索 工 具 可 绘制 选 框 的 直线 边框 ， 适 合 选择 多 边 形 选 区 。 使 用 多 边 形 套 索 工 
有 具 创建 选区 的 具体 操作 步骤 如 下 。 

EEC 打开 随 书 光盘 中 的 素材 文件 ， 如 图 20-16 所 示 。 

ED 选择 工具 箱 中 的 【多 边 形 套 索 工具 】， 如 图 20-17 所 示 。 

EEJB) 单 击 长 方 体 上 的 一 点 作为 起 始点 ， 然 后 依次 在 长 方 体 的 边缘 单 击 选择 不 同 的 
点 ， 最 后 汇合 到 起 始点 或 者 双击 鼠标 就 可 以 自动 闭合 选区 ， 如 图 20-18 所 示 。 


半 洒 一 测 冲 院 9SO doysoloyd 沽 窜 一 一 泣 记 中 谎 半 小 当 他 几 07 小 站 


A 


20-16 ”打开 素材 文件 20-17 ”选择 多 边 形 套 索 工具 20-18 ”生成 选区 


20.1.7 案例 7 一 一 磁性 套 索 工具 的 使 用 


使 用 磁性 套 索 工具 可 以 智能 地 自动 选取 选区 ， 特 别 适用 于 快速 选择 与 背景 对 比 强烈 而 且 
边缘 复杂 的 对 象 。 使 用 磁性 套 索 工具 创建 选区 的 具体 操作 如 下 。 

EEC 打开 随 书 光盘 中 的 素材 文件 ， 如 图 20-19 所 示 。 

EUP9 选择 工具 箱 中 的 【磁性 套 索 工 具 】， 如 图 20-20 所 示 。 


图 20-19 打开 素材 文件 图 20-20 ”选择 磁性 套 索 工具 


Ta 需要 选择 的 图 像 如 果 与 边缘 的 其 他 色彩 接近 ， 自 动 吸附 会 出 现 偏差 ， 这 时 可 单 击 
六 ”和 鼠 标 以 手动 添加 一 个 紧 固 点 。 如 果 要 抹 除 刚 绘制 的 线段 和 紧 固 点 ， 可 按 Delete 键 ， 连 
续 按 Delete 键 可 以 倒序 依次 删除 紧 固 点 。 
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EEep 在 图 像 上 单 击 以 确定 第 一 个 紧 固 点 。 如 果 想 取消 使 用 磁性 套 索 工具 ， 可 按 Esc 
键 。 将 鼠标 指针 沿 着 要 选择 图 像 的 边缘 慢 慢 地 移动 ， 选 取 的 点 会 自动 吸附 到 色彩 差 
异 的 边沿 ， 如 图 20-21 所 示 。 

EC 拖 电 鼠 标 使 线条 移动 至 起 点 ， 鼠 标 指针 会 变 为 骂 形状 ， 单 击 即 可 闭合 选 框 ， 如 

图 20-22 所 示 。 


图 20-21 开始 选取 图 像 图 20-22 生成 选区 
20.1.8 案例 8 一 一 魔 棒 工具 的 使 用 


使 用 魔 棒 工 具 可 以 自动 地 选择 颜色 一 致 的 区 域 ， 不 必 跟踪 其 轮廓 ， 特 别 适 用 于 选择 颜色 
相近 的 区 域 。 使 用 魔 棒 工 具 选取 图 像 的 操作 步骤 如 下 。 
ES 打开 随 书 光盘 中 的 素材 文件 ， 如 图 20-23 所 示 。 
本 于 BY 选择 工具 箱 中 的 【 魔 棒 工具 】， 如 图 20-24 所 示 。 
本 了 BY 在 图 像 中 单 击 想 要 选取 的 颜色 ， 即 可 选取 相近 颜色 的 区 域 ， 如 图 20-25 所 示 。 


快速 选 择 I 具 W 
， 黄 、 砚 竺 工具 w 
图 20-23 ”打开 素材 文件 图 20-24 ”选择 魔 棒 工 具 图 20-25 生成 选区 
@s 不 能 在 位 图 模式 的 图 像 中 使 用 魔 棒 工 具 。 
Ek 
20.1.9 案例 9 一 一 快速 选择 工具 的 使 用 


使 用 快速 选择 工具 可 以 更 加 方便 快捷 地 进行 选取 操作 ， 使 用 快速 选择 工具 创建 选区 的 具 
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体操 作 如 下 。 

打开 随 书 光盘 中 的 素材 文件 ， 如 图 20-26 所 示 。 

EEIPy9 选择 工具 箱 中 的 【快速 选择 工具 】， 如 图 20-27 所 示 。 

设置 合适 的 画笔 大 小 ， 在 图 像 中 单 击 想 要 选取 的 颜色 ， 即 可 选取 相近 颜色 的 区 
域 。 如 果 需 要 继续 加 选 ， 单 击 国 按钮 后 继续 单 击 或 者 双击 进行 选取 ， 如 图 20-28 所 示 。 


= 快速 选择 工具 WwW 


。 状 魔 棱 工具 


图 20-26 打开 素材 文件 图 20-27 选择 快速 选择 工具 图 20-28 生成 选区 


20.1.10 “案例 10 一 一 渐变 工具 的 使 用 


渐变 是 由 一 种 颜色 向 另 一 种 颜色 实现 的 过 渡 ， 以 形成 一 种 柔和 的 或 者 特殊 规律 的 色彩 区 
域 ， 可 以 在 整个 文档 或 选区 内 填充 渐变 颜色 。 使 用 渐变 工具 绘制 彩色 圆柱 的 操作 步骤 如 下 。 
EY 新 建 一 个 大 小 为 800 像素 x600 像素 、 分 辩 率 为 72 像素 /英寸 的 画布 ， 如 图 20-29 


耶 涉 司 前 污 纤 9SO doysolodd 末 诊 一 一 活 训 下 训 阁 沾 湖 衣 出 0Z7 小 下 


A 


所 示 。 
EEJPpp 在 【图 层 】 面 板 中 单 击 【 新 建 图 层 】 按 钮 对， 新 建 【图 层 1】 图 层 ， 如 图 20-30 
所 示 。 
mm 画 
全 作用 1 | 
叫 设 (Pp 白 定 - 职 光 
ET 
宽度 (W): 800 篇 素 [3 
高 度 (H): 500 像素 
分 关 率 (R)! 72 铭 素 /英寸 
HES(N) TEEEE 8 伍 
背景 内 容 (5)， 白色 过 图 旬 大 小 : 
EP™ L274 


图 20-29 【新 建 】 对 话 框 图 20-30 新建 图 层 
EEJB) 选择 工具 箱 中 的 【和 矩形 选 框 工具 】 国 ， 然 后 在 画布 中 建立 一 个 矩形 选 框 ， 如 


图 20-31 所 示 。 

在 属性 栏 中 单 击 【 添 加 到 选区 】 按 钮 国 ， 然 后 使 用 【椭圆 选 框 工具 】 国 在 算 形 
选 框 的 底部 绘制 一 个 椭圆 ， 如 图 20-32 所 示 。 

区 于 BY 最 终 的 选区 效果 如 图 20-33 所 示 。 
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图 20-31 绘制 矩形 图 20-32 ”椭圆 选 框 工具 图 20-33 生成 选区 


EDDD 选择 【渐变 工具 】 国 |， 在 其 属性 栏 中 单 击 【点 按 可 编辑 渐变 】 按 钮 国 故 同 , 
选择 【 预 设 】 中 的 【色谱 】， 如 图 20-34 所 示 。 

四 TD 在 属性 栏 中 单 击 【 线 性 渐变 】 按 钮 国 ， 然 后 在 选区 中 水 平 拖 忠 填充 渐变 ， 如 
图 20-35 所 示 。 


20-34 【渐变 编辑 器 】 对 话 框 20-35 填充 选区 


EEC) 按 CtrltD 组 合 键 取消 选区 ， 在 【图 层 】 面 板 中 单 击 【新 建 图 层 】 按 钮 ， 新 建 
【图 层 2】 图 层 。 选 择 【 图 层 2】 图 层 ， 然 后 使 用 【椭圆 选 框 工具 】 在 矩形 的 上 方 创 
建 一 个 椭圆 选区 ， 如 图 20-36 所 示 。 

ED 将 选区 填充 为 灰色 (C: 0、M: 0、Y: 0、K: 10)， 然 后 取消 选区 ， 如 图 20-37 
所 示 。 


图 20-36 ”创建 椭圆 选区 图 20-37 最 终 的 效果 


20.2 创建 与 保存 网 页 文档 


在 了 解 了 Photoshop CS6 的 常用 工具 后 ， 下 面 就 可 以 使 用 Photoshop CS6 创建 网 页 文档 
了 。 本 节 主 要 介绍 创建 与 保存 网 页 文档 的 方法 。 


20.2.1 案例 11 一 一 创建 网 页 文档 


在 使 用 Photoshop CS6 进行 网 页 设计 时 ， 需 要 事先 创建 一 个 网 页 文档 。 创 建 网 页 文档 的 具 
体操 作 步 又 如 下 。 
EC 在 Photoshop CS6 工作 界面 中 ， 选 择 【文件 】 一 【新 建 】 菜 单 命 令 ， 打 开 【 新 
建 】 对 话 框 。 在 其 中 输入 网 页 文档 的 名 称 ， 并 设置 网 页 文档 的 大 小 、 颜 色 模 式 、 分 
辩 率 等 ， 如 图 20-38 所 示 。 
单 击 【 确 定 】 按 钮 ， 即 可 创建 一 个 空白 文档 ， 如 图 20-39 所 示 。 


名称 (N); 汽车 网 页 
斋 旋 (P) 自 定 
jax): 
宽度 (W): 1024 
高 度 (H): 758 


分 关 率 IR): 
蔬 色 模式 (M); RG6 颜色 ~ 
背 基 内 容 (0) 白色 


党 高 级 


图 20-38 【新 建 】 对 话 框 图 20-39 ”空白 文档 


【新 建 】 对 话 框 中 的 参数 介绍 如 下 。 

e@ 【名称 】 文 本 框 : 用 于 填写 新 建文 件 的 名 称 。“ 未 标题 -1” 是 Photoshop 默认 的 名 
称 ， 可 以 将 其 改 为 其 他 名 称 。 

@ 【 预 设 】 下 拉 列 表 框 : 用 于 提供 预 设 文件 尺寸 及 自 定义 尺寸 。 

e@ 【宽度 】 文本 框 : 用 于 设置 新 建文 件 的 宽度 ， 默 认 以 像素 为 宽度 单位 ， 也 可 以 选择 
英寸 、 厘 米 、 毫 米 、 点 、 派 卡 和 列 等 为 单位 。 

@ 【高 度 】 文 本 框 : 用 于 设置 新 建文 件 的 高 度 ， 单 位 同上 。 

@ 【分 辩 率 】 文 本 框 : 用 于 设置 新 建文 件 的 分 辩 率 。 像 素 /英寸 默认 为 分 辩 率 的 单位 ， 
也 可 以 选择 像素 /厘米 为 单位 。 

ee 【颜色 模式 】 下 拉 列 表 框 : 用 于 设置 新 建文 件 的 模式 ， 包 括 位 图 、 灰 度 、RGB 颜 
色 、CMYK 颜色 和 Lab 颜色 等 几 种 模式 。 

@ 【背景 内 容 】 下 拉 列 表 框 : 用 于 设置 新 建文 件 的 背景 内 容 ， 包 括 白色 、 背 景色 和 透 
明 3 种 。 
* ”白色 : 白色 背景 。 
4 ”背景 色 : 以 所 设 定 的 背景 色 (相对 于 前 景色 ) 为 新 建文 件 的 背景 。 
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* ”透明 : 透明 背景 (以 灰色 与 白色 交错 的 格子 表示 )。 


Sn 按 CttLHN 组 合 键 也 可 以 打开 【新 建 〗 对 话 框 。 


20.2.2 ”案例 12 一 一 保存 网 页 文档 


一 般 在 设计 好 网 页 后 ， 或 将 网 页 设计 到 一 半 时 ， 都 需要 将 其 保存 起 来 。 下 面 介绍 如 何 保 
存 设计 的 网 页 文档 。 

保存 网 页 文件 的 方法 有 以 下 3 种 。 

方法 1: 使 用 【存储 】 菜 单 命令 。 

选择 【文件 】 一 【存储 】 菜 单 命令 ， 可 以 以 原 有 的 格式 存储 正在 编辑 的 文件 ， 如 图 20-40 
所 示 。 

方法 2: 使 用 【存储 为 】 菜 单 命令 。 

选择 【文件 】 一 【存储 为 】 菜 单 命 令 ， 打 开 【 存 储 为 】 对 话 框 进 行 保存 。 对 于 新 建 的 文 
件 或 已 经 存储 过 的 文件 ， 可 以 使 用 【存储 为 】 命 令 将 文件 另外 存储 为 某 种 特定 的 格式 ， 如 
20-41 所 示 。 


NN 

打开 Di- 

二 Brdge TE).. 

在 过 你 6ridge 赴 ECG 
为。 


20-40 选择 【存储 】 菜 单 命令 20-41 【存储 为 】 对 话 框 


(1) 【存储 选项 】 选 项 组 :用 于 对 各 种 要 素 进行 存储 前 的 取舍 。 

。 【作为 副本 】 复 选 框 : 勾 选 此 复 选 框 ， 可 将 所 编辑 的 文件 存储 为 文件 的 副本 并 且 不 
影响 原 有 的 文件 。 

@ 【Alpha 通道 】 复 选 框 ， 当 文件 中 存在 Alpha 通道 时 ， 可 以 选择 存储 Alpha 通道 
( 色 选 此 复 选 框 ) 或 不 存储 Alpha 通道 (取消 勾 选 此 复 选 框 )。 要 查看 图 像 是 否 存在 
Alpha 通道 ， 可 选择 【窗口 】 一 【通道 】 菜 单 命 令 打 开 【 通 道 】 面 板 ， 然 后 在 其 
中 查看 。 

e@ 【图 层 】 复 选 框 : 当 文件 中 存在 多 个 图 层 时 ， 可 以 保持 各 图 层 独立 进行 存储 ( 勾 选 
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此 复 选 框 ) 或 将 所 有 图 层 合并 为 同一 图 层 存储 (取消 勾 选 此 复 选 框 )。 要 查看 图 像 是 
否 存 在 多 个 图 层 ， 可 选择 【窗口 】 一 【图 层 】 菜 单 命令 打开 【图 层 】 面 板 ， 然 后 在 
其 中 查看 。 

@ 【注释 】 复 选 框 ， 当 文件 中 存在 注释 时 ， 可 以 通过 勾 选 或 取消 勾 选 此 复 选 框 对 其 存 
储 或 忽略 。 

@ 【 专 色 】 复 选 框 ， 当 图 像 中 存在 专 色 通 道 时 ， 可 以 通过 勾 选 或 取消 勾 选 此 复 选 框 对 
其 存储 或 忽略 。 专 色 通 道 可 以 在 【通道 】 面 板 中 查看 。 

(2) 【颜色 】 选 项 组 : 用 于 为 存储 的 文件 配置 颜色 信息 。 

(3) 【 缩 览 图 】 复 选 框 : 用 于 为 存储 文件 创建 缩 览 图 ， 该 选项 为 灰色 表明 系统 自动 地 为 其 

创建 缩 览 图 。 

(4) 【使 用 小 写 扩展 名 】 复 选 框 : 色 选 此 复 选 框 ， 则 用 小 写字 母 创建 文件 的 扩展 名 。 

方法 3: 使 用 快捷 键 。 

按 Ctrl+S 组 合 键 进行 保存 。 


| 对 于 正在 编辑 的 文件 应 该 随时 存储 ， 以 免 出 现 意外 而 丢失 ， 


20.3 网 页 的 版 面 设计 


当 用 户 在 网 络 中 邀 游 时 ， 一 个 个 精彩 的 网 页 会 呈现 在 我 们 面前 。 网 页 的 精彩 因素 有 哪些 
呢 ? 色彩 的 搭配 、 文 字 的 变化 、 图 片 的 处 理 等 ， 这 些 当 然 是 不 可 忽略 的 因素 ， 除 了 这 些 ， 还 
有 一 个 重要 的 因素 ， 那 就 是 网 页 的 版 面 设计 。 


20.3.1 案例 13 一 一 熟悉 常用 版 面 布局 样式 


下 面 看 看 我 们 经 常用 到 的 版 面 布局 形式 。 

1. T 形 布局 

所 谓 工 形 布局 ， 是 指 页 面 顶 部 为 横 条 网 站 标志 + 广告 条 ， 下 方 左 面 为 主 菜单 ， 右 面 显示 内 
容 的 布局 ， 因 为 菜单 条 背景 较 深 ， 整 体 效 果 类 似 英文 字母 T， 如 图 20-42 所 示 。 这 是 网 页 设计 
中 用 得 最 广泛 的 一 种 布局 方式 ， 其 优点 是 页 面 结构 清晰 ， 主 次 分 明 ， 是 初学 者 最 容易 上 手 的 
布局 方法 。 缺 点 是 规矩 呆板 ， 如 果 细 节 色 彩 上 不 注意 ， 很 容易 让 人 “看 之 无 味 ”。 

2. “ 口 ” 形 布局 

这 是 一 个 象形 的 说 法 ， 就 是 页 面 一 般 上 下 各 有 一 个 广告 条 ， 左 面 是 主 菜单 ， 右 面 放 友 情 
链接 等 ， 中 间 是 主要 内 容 ， 如 图 20-43 所 示 。 这 种 布局 的 优点 是 充分 利用 版 面 ， 信 息 量 大 。 
缺点 是 页 面 拥挤 ， 不 够 灵活 。 也 有 将 四 边 空 出 ， 只 用 中 间 的 “ 口 ” 形 布局 。 
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图 20-42 丁 形 布 局 图 20-43 “ 口 ” 形 布局 

3. “三 ” 形 布局 

这 种 布局 多 用 于 国外 站 点 ， 国 内 用 得 不 多 。 特 点 是 页 面 上 横向 两 条 色 块 ， 将 页 面 整体 分 
割 为 4 个 部 分 ， 色 块 中 大 多 放 广 告 条 ， 如 图 20-44 所 示 。 

4. 对 称 对 比 布局 

顾名思义 ， 采 取 左 右 或 者 上 下 对 称 的 布局 ， 一 半 深 色 ， 一 半 浅 色 ， 一 般 用 于 设计 型 站 
点 ， 如 图 20-45 所 示 。 优 点 是 视觉 冲击 力 强 ， 缺 点 是 将 两 部 分 有 机 地 结合 比较 困难 。 
| 一 一 | 
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图 20-44 “三 ” 形 布局 图 20-45 对称 对 比 布局 
5. POP 布局 


POP 引 自 广告 术语 ， 是 指 页 面 布局 像 一 张 宣传 海报 ， 以 一 张 精 美 图 片 作为 页 面 的 设计 中 
心 ， 常 用 于 时 尚 类 站 点 ， 如 图 20-46 所 示 。 其 优点 显而易见 : 漂亮 吸引 人 。 缺 点 就 是 速度 
慢 。 作 为 版 面 布 局 还 是 值得 借鉴 的 。 


图 20-46 POP 布局 
20.3.2 ”案例 14 一 一 在 Photoshop CS6 中 构建 网 页 结构 


在 设计 网 页 之 前 ， 设 计 者 可 以 先 在 Photoshop 中 勾画 出 框架 ， 那 么 后 来 的 设计 就 可 以 在 此 
框架 基础 上 进行 布局 了 ， 具 体 的 操作 步骤 如 下 。 
ED 打开 Photoshop CS6， 如 图 20-47 所 示 。 
选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建 】 对 话 框 ， 在 其 中 设置 文档 的 
宽度 为 1024 像素 、 高 度 为 768 像素 ， 如 图 20-48 所 示 。 


半 洒 一 淹 闪 了 9SO doyso}oyd 洒 记 一 活 弗 下 就 于 六 湖 站 出 07 小 二 


A 


名称 (N): 未 标题 2 [rm | 
预 设 (P); 自 定 ”| ERs 
[存活 设 (5)..， ] 
殉 度 (W): 1024 像素 ~ 性 除 预 设 ( 
高 度 (H):; 768 像素 中 
分 兰 (R); 96.012 集 素 | 英寸 ~ 
荐 色 模式 (M); RGB 基色 。> 8 位 
背景 内 容 (QO; 白色 ed 图 像 大 小 : 
司 高 级 2.25M 
20-47 Photoshop CS6 的 工作 界面 20-48 【新 建 】 对 话 框 


单 击 【 确 定 】 按 钮 ， 创 建 一 个 1024 像素 x768 像素 的 文档 ， 如 图 20-49 所 示 。 
选择 工具 箱 中 的 【和 矩形 工具 】， 并 调整 为 路 径 状 态 ， 绘 制 一 个 矩形 框 ， 如 
图 20-50 所 示 。 

使 用 文字 工具 ， 创 建 一 个 文本 图 层 ， 输 入 “网 站 的 头 部 ”， 如 图 20-51 所 示 。 
依次 绘 出 中 左 、 中 右 和 底部 ， 网 站 的 结构 布局 最 终 如 图 20-52 所 示 。 
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20-49 创建 空白 文档 20-50 绘制 矩形 框 
网 站 的 头 部 网 站 的 头 部 
网 站 的 中 左 网 站 的 中 右 
网 站 的 底部 
20-51 输入 文字 图 20-52 输入 其 他 文字 


20.4 ”实战 演练 一 一 网 页 图 像 的 切割 


网 页 效果 图 出 来 之 后 ， 首 先 需要 将 网 页 要 展现 的 样式 分 为 几 块 ， 也 就 是 通常 所 说 的 网 页 
图 像 的 切割 。 最 常用 的 切割 工具 还 是 Photoshop， 在 掌握 切 图 原则 后 ， 就 可 以 动手 实际 操 了 。 

具体 的 操作 步骤 如 下 。 

选择 【文件 】 一 【打开 】 菜 单 命令 ， 打 开 随 书 光盘 中 的 素材 图 片 ， 如 图 20-53 
所 示 。 

在 工具 箱 中 单 击 【 切 片 工 具 】 按 钮 国 ， 根 据 需 要 在 网 页 中 选择 需要 切 制 的 图 
片 ， 如 图 20-54 所 示 。 

选择 【文件 】 一 【存储 为 Web 所 用 格式 】 菜 单 命令 ， 打 开 【 存 储 为 Web 所 用 
格式 】 对 话 框 ， 在 其 中 选中 所 有 切片 图 像 ， 如 图 20-55 所 示 。 

单 击 【 存 储 】 按 钮 ， 即 可 打开 【将 优化 结果 存储 为 】 对 话 框 ， 在 【切片 】 下 拉 
列表 框 中 选择 【所 有 切片 】 选 项 ， 如 图 20-56 所 示 
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20-55 【存储 为 Web 所 用 格式 】 对 话 框 20-56 【将 优化 结果 存储 为 】 对 话 框 
单 击 【 保 存 】 按 钮 ， 即 可 将 所 有 切片 中 的 图 像 保存 起 来 ， 如 图 20-57 所 示 。 
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图 20-57 图 像 切割 对 象 
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nt 在 切 图 过 程 中 ， 如 果 有 格式 一 致 的 重复 项 ， 我 们 只 需 切 一 次 ， 其 他 重复 项 可 以 通 


个 重复 项 表格 图 片 大 小 统一 。 


20.5 ” 跟 我 练 练 手 
20.5.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 


20.5.2 上 机 练习 


练习 1: 使 用 Photoshop 常用 工具 。 
练习 2: 创建 与 保存 网 页 文档 。 
练习 3: 设计 网 页 版 面 。 


20.6 高 手 甜 点 


甜点 1: 利用 状态 或 快照 快速 创建 新 文档 


根据 图 像 的 所 选 状态 或 快照 创建 新 文档 的 方法 有 以 下 几 种 。 
(1) 将 状态 或 快照 拖 忠 至 【从 当前 状态 创建 新 文档 】 按 钮 上 。 
(2) 选择 状态 或 快照 ， 然 后 单 击 【 从 当前 状态 创建 新 文档 】 按 钮 。 


甜点 2: 怎样 使 一 个 图 片 和 另 一 个 图 片 很 好 地 融合 在 一 起 


有 以 下 两 种 方法 可 以 解决 这 个 问题 : 

(1) 先 选中 图 片 ， 进 行 羽 化 ， 然 后 反选 ， 再 按 Delete 键 ， 这 样 就 可 以 把 图 片 边缘 羽化 。 
为 了 达到 好 的 融合 效果 ， 可 以 把 羽化 的 像素 值 设 定 为 较 大 ， 同 时 还 可 以 多 次 按 Delete 键 ， 那 
样 融合 的 效果 会 更 好 。 

(2) 在 图 片上 添加 蒙 版 ， 然 后 对 图 片 进 行 羽化 ， 同 样 能 达到 融合 的 效果 。 把 层 的 透明 度 降 
低 ， 效 果 会 更 好 。 
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页 设计 中 传达 的 视觉 信息 是 网 页 设计 的 三 个 基本 要 素 : 图 形 、 文 字 和 色彩 。 
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的 准确 性 ， 决 定 网 页 设计 的 成 败 。 
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21.1 网 页 图 像 堆 共 之 图 层 


图 层 是 Photoshop 最 为 核心 的 功能 之 一 。 它 承载 了 几乎 所 有 的 编辑 操作 。 如 果 没 有 图 层 ， 
所 有 的 图 像 将 处 在 同一 个 平面 上 ， 这 对 图 像 编 辑 来 讲 ， 简 直 是 无 法 想象 的 。 正 是 因为 有 了 图 
层 功能 ，Photoshop 才 变 得 如 此 强大 。 


21.1.1 案例 1 一 一 认识 【图 层 】 面 板 


Photoshop 中 的 所 有 图 层 都 被 保存 在 【图 层 】 面 板 中 ， 对 图 层 的 各 种 操作 基本 上 都 可 以 在 
【图 层 】 面 板 中 完成 。 使 用 【图 层 】 面 板 可 以 创 
建 、 编 辑 和 管理 图 层 以 及 为 图 层 添加 样式 ， 还 可 以 
显示 当前 编辑 的 图 层 信息 ， 使 用 户 清楚 地 掌握 当前 
图 层 操作 的 状态 。 

选择 【窗口 】 一 【图 层 】 菜 单 命令 或 按 F7 键 可 
以 打开 【图 层 】 面 板 ， 如 图 21-1 所 示 。 


21.1.2 “案例 2 一 一 图 层 的 分 类 

Photoshop 的 图 层 类 型 有 多 种 ， 可 以 将 图 层 分 为 图 21-1 【图 层 】 面 板 
普通 图 层 、 背 景 图 层 、 文 字 图 层 、 形 状 图 层 等 。 

1. 普通 图 层 

普通 图 层 是 一 种 常用 的 图 层 。 在 普通 图 层 上 用 户 可 以 进行 各 种 图 像 编 辑 操作 ， 如 图 21-2 
所 示 。 

2. 背景 图 层 

使 用 Photoshop 新 建文 件 时 ， 如 果 【 背 景 内 容 】 选 择 为 白色 或 背景 色 ， 在 新 文件 中 就 会 被 


自动 创建 一 个 背景 图 层 。 并 且 该 图 层 还 有 一 个 锁定 的 标志 全 。 背 景 图 层 始终 在 最 底层 ， 就 像 
一 栋 楼 房 的 地 基 一 样 ， 不 能 与 其 他 图 层 调整 登 放 顺 序 。 
一 个 图 像 中 可 以 没有 背景 图 层 ， 但 最 多 只 能 有 一 个 背景 图 层 ， 如 图 21-3 所 示 。 


图 21-2 普通 图 层 图 21-3 背景 图 层 


$ 438 


上 


背景 图 层 的 不 透明 度 不 能 更 改 ， 不 能 为 背景 图 层 添加 图 层 蒙 版 ， 也 不 可 以 使 用 图 层 样 
式 。 如 果 要 改变 背景 图 层 的 不 透明 度 、 为 其 添加 图 层 蒙 版 或 者 使 用 图 层 样式 ， 可 以 先 将 背景 
图 层 转换 为 普通 图 层 。 

把 背景 图 层 转换 为 普通 图 层 的 具体 操作 步骤 如 下 。 

EEJop 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-4 所 示 。 

SSTPY 选择 【窗口 】 一 【图 层 】 菜 单 命 令 ， 打 开 【 图 层 】 面 板 。 在 【图 层 】 面 板 中 选 

定 背 景 图 层 ， 如 图 21-5 所 示 。 


言 洒 和 半 北 洲 H| 沼 到 一 一 总 部 册 动 河 避 所 需 Lz 小 曾 六 


图 21-4 打开 素材 文件 图 21-5 选择 背景 图 层 


ECDIS 选择 【图 层 】 一 【新 建 】 一 【背景 图 层 】 菜 单 命令 ， 如 图 21-6 所 示 。 
EC 弹出 【新 建 图 层 】 对 话 框 ， 如 图 21-7 所 示 。 


多 GG 


21- 6 选择 【背景 图 层 】 菜 单 命令 21-7 【新 建 图 层 】 对 话 框 
莉 于 BY 单 击 【 确 定 】 按 钮 ， 背 景 图 层 即 转换 为 普通 图 层 ， 如 图 21-8 所 示 。 


5 使 用 背景 橡皮 擦 工具 和 魔术 橡皮 擦 工具 擦 除 背 景 图 层 时 ， 背 景 图 层 便 自 动 变 成 普 


SN 通 图 层 。 另 外 ， 直 接 在 背景 图 层 上 双击 ， 可 以 快速 将 背景 图 层 转换 为 普通 图 层 。 


3. 文字 图 层 

文字 图 层 是 一 种 特殊 的 图 层 ， 用 于 存放 文字 信息 。 它 在 
图 层 】 面 板 中 的 缩 览 图 与 普通 图 层 不 同 。 如 图 21-9 所 示 第 一 
图 层 为 文字 图 层 ， 第 二 个 图 层 为 普通 图 层 。 

文字 图 层 主要 用 于 编辑 图 像 中 的 文本 内 容 ， 用 户 可 以 对 文 
字 图 层 进行 移动 、 复 制 等 操作 。 但 是 不 能 使 用 绘画 和 修饰 工具 
来 绘制 和 编辑 文字 图 层 中 的 文字 ， 不 能 使 用 【 滤 镜 】 菜 单 命 
令 。 如 果 需 要 编辑 文字 ， 则 必须 栅 格 化 文字 图 层 ， 被 栅 格 化 后 
的 文字 将 变 为 位 图 图 像 ， 不 能 再 修改 其 文字 内 容 。 


六 ~ 


21-8 【图 层 】 面 板 
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1) 普通 方法 


字 图 层 即 转换 为 普通 图 层 ， 如 图 21-11 所 示 。 


选中 文字 图 层 ， 选 择 【 图 层 】 一 【 栅 格 化 】 一 【文字 】 菜 单 命 令 ， 如 


栅 格 化 文字 图 层 就 是 将 文字 图 层 转换 为 普通 图 层 。 可 以 执行 下 列 操作 之 一 


图 21-9 文字 图 层 21-10 ”选择 【文字 】 菜 单 命令 ”图 21-11 文字 图 层 转换 为 普通 图 层 
2) 快捷 方法 


在 【图 层 】 面 板 中 的 文字 图 层 上 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【 栅 格 化 文字 】 命 令 ， 


可 以 将 文字 图 层 转换 为 普通 图 层 ， 如 图 21-12 所 示 。 
4. 形状 图 层 


形状 是 矢量 对 象 ， 与 分 辩 率 无 关 。 形 状 图 层 一 般 是 使 用 工具 箱 中 的 形状 工具 (【 和 矩形 工 
【 自 定形 状 工 


有 具 】、【 圆 角 和 矩形 工具 】、【 椭 圆 工 具 】、【 多 边 形 工具 】、 
具 】 或 【钢笔 工具 】) 绘 制图 形 后 而 自动 创建 的 图 层 。 


【直线 工具 】、 


图 21-10 所 示 。 文 


要 创建 形状 图 层 ， 一 定 要 先 在 属性 栏 中 单 击 【形状 图 层 】 按 钮 马 。 形 状 图 层 包含 定义 形 


状 颜色 的 填充 图 层 和 定义 形状 轮廓 的 矢量 蒙 版 。 形 状 轮廓 是 路 径 ， 


显示 在 【路 径 】 面 板 中 。 


如 果 当 前 图 层 为 形状 图 层 ， 在 【路 径 】 面 板 中 可 以 看 到 矢量 蒙 版 的 内 容 ， 如 图 21-13 所 示 。 


路 径 


瑟 浅 7 本 证 避 经 


图 21-12 选择 【 栅 格 化 文字 】 命 令 图 21-13 形状 图 层 


3 440 


用 户 可 以 对 形状 图 层 进行 修改 和 编辑 ， 具 体操 作 如 下 。 
ET 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-14 所 示 。 
EDUD) 创建 一 个 形状 图 层 ， 然 后 在 【图 层 】 面 板 中 双击 该 图 层 的 缩 览 图 ， 如 图 21-15 


图 21-14 打开 素材 文件 图 21-15 形状 图 层 


EEBp 打开 【 拾 色 器 】 对 话 框 ， 如 图 21-16 所 示 。 
YY 选择 相应 的 颜色 后 单 击 【 确 定 】 按 钮 ， 即 可 重新 设置 填充 颜色 ， 如 图 21-17 所 示 。 


CA Web Re 


图 21-16 【 拾 色 器 】 对 话 框 图 21-17 选择 颜色 


ECGD 使 用 工具 箱 中 的 【直接 选择 工具 】[XJ， 即 可 修改 或 编辑 形状 中 的 路 径 ， 如 


如 果 要 将 
1) 完全 机 
选择 形状 
可 将 形状 图 层 


但 同时 转换 为 


图 21-18 所 示 。 


形状 图 层 转换 为 普通 图 层 ， 需 要 栅 格 化 形状 图 层 ， 有 以 下 3 种 方法 。 

格 化 法 

图 层 ， 选 择 【 图 层 】 一 【 栅 格 化 】 一 【形状 】 菜 单 命 令 ， 如 图 21-19 所 示 。 即 
转换 为 普通 图 层 ， 同 时 不 保留 蒙 版 和 路 径 ， 如 图 21-20 所 示 。 

格 化 法 

层 】 一 【 栅 格 化 】 一 【填充 内 容 】 菜 单 命令 ， 将 栅 格 化 形状 图 层 填 充 ， 同 时 保 


， 如 图 21-21 所 示 。 


格 化 法 
层 】 一 【 栅 格 化 】 一 【矢量 蒙 版 】 菜 单 命令 ， 将 栅 格 化 形状 图 层 的 矢量 蒙 版 ， 
图 层 蒙 版 ， 丢 失 路 径 ， 如 图 21-22 所 示 。 


站 朵 竹 涉 汀 汗 喇 习 一 一 当 款 庆 运 六 悦 六。 几 1Z 小 中 站 


A 
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图 21-20 形状 图 层 转 换 为 普通 图 层 图 21-21 ”路径 栅 格 化 法 图 21-22 蒙 版 栅 格 化 法 


21.1.3 ”案例 3 一 一 创建 图 层 
需要 使 用 新 图 层 时 ， 可 以 执行 图 层 创建 操作 。 创 建 图 层 的 方法 有 以 下 几 种 。 
方法 一 : 打开 【图 层 】 面 板 ， 单 击 【新 建 图 层 】 按 钮 下 ， 可 创建 新 图 层 ， 如 图 21-23 


所 示 。 
方法 二 : 选择 【图 层 】 一 【新 建 】 一 【图 层 】 菜 单 命 令 ， 弹 出 【新 建 图 层 】 对 话 


框 ， 可 创建 新 图 层 ， 如 图 21-24 所 示 。 


= 
2 可 
MP) 
其 名 (cj: x 无 ba 
要 式 (M》 正 营 ” 不 授 明 吝 (0); | 100 和 % 


下 党 公立 下 让 下 中 性 包 


图 21-23 单 击 【 新 建 图 层 】 按 钮 图 21-24 【新 建 图 层 】 对 话 框 
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@ 方法 三 : 按 Ctrl+ShifttN 组 合 键 也 可 以 弹出 【新 建 图 层 】 对 话 框 ， 进 而 创建 新 图 层 。 
21.1.4 ”案例 4 一 一 隐藏 与 显示 图 层 


在 进行 图 像 编辑 时 ， 为 了 避免 在 部 分 图 层 中 误 操作 ， 可 以 先 将 其 隐藏 ， 需 要 对 其 操作 时 
再 将 其 显示 。 隐 藏 与 显示 图 层 的 方法 有 以 下 两 种 。 

e 方法 一 : 打开 【图 层 】 面 板 ， 选 择 需要 隐藏 或 显示 的 图 层 ， 图 层 前 面 有 一 个 可 见 性 
指示 框 ， 显 示 眼 睛 图 标 时 ， 该 图 层 可 见 ， 单 击 眼睛 ， 眼 睛 会 消失 ， 图 层 变 为 不 可 
见 ， 再 次 单 击 ， 图 层 会 再 次 显示 为 可 见 ， 如 图 21-25 所 示 。 

e@ 方法 二 : 选择 需要 隐藏 的 图 层 后 ， 选 择 【 图 层 】 一 【隐藏 图 层 】 菜 单 命令 ， 可 将 图 
层 隐 藏 ， 如 图 21-26 所 示 。 选 择 需 要 显示 的 图 层 ， 选 择 【 图 层 】 一 【显示 图 层 】 菜 
单 命令 ， 可 将 其 设 为 可 见 ， 如 图 21-27 所 示 。 


CEETESTIEEEETY 
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A) 


图 21-25 【图 层 】 面板 图 21-26 隐藏 图 层 图 21-27 显示 图 层 
21.1.5 “案例 5 一 一 对 齐 图 层 


依据 当前 图 层 和 链接 图 层 的 内 容 ， 可 以 进行 图 层 之 间 的 对 齐 操作 。Photoshop 中 提供 有 6 
种 对 齐 方式 。 对 齐 图 层 的 操作 步骤 如 下 。 

EEJDp 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-28 所 示 。 

EEC 在 【图 层 】 面 板 中 按 住 Cul 键 的 同时 单 击 【 图 层 1】、【 图 层 2】、【 图 层 

3】、【 图 层 4】 和 【图 层 5】 图 层 ， 如 图 21-29 所 示 。 

EEJep 选择 【图 层 】 一 【对 齐 】 一 【 顶 边 】 菜 单 命令 ， 如 图 21-30 所 示 。 

ED 最 终 效果 如 图 21-31 所 示 。 

Photoshop 提供 有 6 种 排列 方式 ， 如 图 21-32 所 示 。 其 具体 含义 如 下 。 

(1) 【 顶 边 】: 将 链接 图 层 顶 端的 像素 对 齐 到 当前 工作 图 层 顶端 的 像素 或 者 选区 边框 的 顶 
端 ， 以 此 方式 来 排列 链接 图 层 的 效果 。 


外 
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mo) 
黄 垂直 居中 9) 
了 底 边 @) 
尼 左边 
课 水 平 居中 00 
喇 右 边 @) 


21-30 选择 【项 边 】 菜 单 命令 21-31 项 边 对 齐 效果 21-32 排列 方式 


(2) 【垂直 居中 】: 将 链接 图 层 的 垂直 中 心 像素 对 齐 到 当前 工作 图 层 垂直 中 心 的 像素 或 者 
选区 的 垂直 中 心 ， 以 此 方式 来 排列 链接 图 层 的 效果 。 

(3) 【 底 边 】: 将 链接 图 层 的 最 下 端的 像素 对 齐 到 当前 工作 图 层 的 最 下 端 像素 或 者 选区 边 
框 的 最 下 端 ， 以 此 方式 来 排列 链接 图 层 的 效果 。 

(4) 【左边 】: 将 链接 图 层 最 左边 的 像素 对 齐 到 当前 工作 图 层 最 左 端的 像素 或 者 选区 边框 
的 最 左 端 ， 以 此 方式 来 排列 链接 图 层 的 效果 。 

(5) 【水 平 居中 】: 将 链接 图 层 水 平 中 心 的 像素 对 齐 到 当前 工作 图 层 水 平 中 心 的 像素 或 者 
选区 的 水 平 中 心 ， 以 此 方式 来 排列 链接 图 层 的 效果 。 

(6) 【右边 】: 将 链接 图 层 的 最 右 端 像素 对 齐 到 当前 工作 图 层 最 右 端 的 像素 或 者 选区 边框 
的 最 右 端 ， 以 此 方式 来 排列 链接 图 层 的 效果 。 


21.1.6 ”案例 6 一 一 合并 图 层 


合并 图 层 即 是 将 多 个 有 联系 的 图 层 合并 为 一 个 图 层 ， 以 便于 进行 整体 操作 。 首 先 选择 要 
合并 的 多 个 图 层 ， 然 后 选择 【图 层 】 一 【合并 图 层 】 菜 单 命 令 即 可 。 也 可 以 通过 按 CtrHE 组 
合 键 来 完成 。 合 并 图 层 的 具体 操作 步骤 如 下 。 

EEIDgp 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-33 所 示 。 


全 


I 


EEJPp 在 【图 层 】 面 板 中 按 住 Ctrl 键 同时 单 击 所 有 图 层 ， 单 击 【 图 层 】 面 板 右 上 角 的 
小 三 角 国 按 钮 ， 在 弹出 的 菜单 中 选择 【合并 图 层 】 命 令 ， 如 图 21-34 所 示 。 


Shih+rovltN 


癌 淋 半 北 洲 H| 河 习 一 一 总 部 间 动 河 避 所 需 Lz 小 


Photoshop 提供 3 种 合并 方式 ， 如 图 21-36 所 示 。 其 具体 含义 如 下 。 


图 21-33 打开 素材 文件 图 21-34 选择 【合并 图 层 】 命 令 NN 
ETIEY 最 终 效果 如 图 21-35 所 示 。 \ 


合并 图 层 全) CtrltE 
合并 可 见 图 层 ShifttCtrltE 
拼合 图 像 F) 

21-35 ”合并 图 层 21-36 ”合并 图 层 的 方式 


(1) 【合并 图 层 】: 在 没有 选择 多 个 图 层 的 状态 下 ， 可 以 将 当前 图 层 与 其 下 面 的 图 层 合 并 
为 一 个 图 层 。 也 可 以 通过 按 Ctrl+E 组 合 键 来 完成 。 

(2) 【合并 可 见 图 层 】: 将 所 有 的 显示 图 层 合 并 到 背景 图 层 中 ， 隐 藏 图 层 被 保留 。 也 可 以 
通过 按 ShiftkCtrl+E 组 合 键 来 完成 。 

(3) 【拼合 图 像 】: 可 以 将 图 像 中 的 所 有 可 见 图 层 都 合并 到 背景 图 层 中 ， 隐 藏 图 层 则 被 删 
除 。 这 样 可 以 大 大 地 减 小 文件 的 大 小 。 


21.1.7 案例 7 一 一 设置 不 透明 度 和 填充 


打开 【图 层 】 面 板 ， 选 择 图 层 ， 可 以 对 图 层 设置 不 透明 度 和 填充 。 两 者 功能 效果 相似 ， 
但 又 有 差异 。 

设置 不 透明 度 和 填充 的 具体 操作 步骤 如 下 。 

EC 打开 随 书 光 盘 中 的 素材 文件 ， 如 图 21-37 所 示 。 
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EEJP) 选中 【图 层 4】， 在 【图 层 】 面 板 中 设置 【不 透明 度 】 为 70%， 图 像 效果 如 图 21-38 
所 示 。 


21-38 ”设置 图 层 不 透明 度 效果 


如 果 将 图 像 的 【填充 】 设 置 为 50%， 图 像 效 果 如 图 21-39 所 示 。 


21-39 ”设置 填充 效果 


【不 透明 度 】 可 以 对 图 像 及 其 混合 效果 都 生效 ， 而 【填充 】 只 对 图 像 本 身 有 用 ， 
CS 对 混合 效果 无 效 。 


证 


21.2 ”网 页 图 像 效 果 之 图 层 样式 


图 层 样式 是 多 种 图 层 效果 的 组 合 ，Photoshop 提供 了 多 种 图 像 效 果 ， 如 阴影 、 发 光 、 浮 雕 
和 颜色 全 加 等 。 将 效果 应 用 于 图 层 的 同时 ， 也 创建 了 相应 的 图 层 样式 。 在 【图 层 样 式 】 对 话 
框 中 可 以 对 创建 的 图 层 样 式 进行 修改 、 保 存 、 删 除 等 编辑 操作 。 


21.2.1 案例 8 一 一 光影 效果 

图 层 样式 当中 的 光影 效果 主要 包括 投影 、 内 阴影 、 外 发 光 、 内 发 光 、 光 泽 等 。 下 面 就 来 
介绍 这 些 图 层 样式 的 使 用 方法 和 使 用 后 的 效果 。 

1. 制作 投影 效果 

应 用 【投影 】 选 项 可 以 在 图 层 内 容 的 背后 添加 阴影 效果 。 

本 TY 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-40 所 示 。 

区 于 BY 输入 文字 “美好 时 光 ”， 字 体 为 华文 行 梅 ， 字 号 为 200 点 ， 颜 色 为 深 绿 色 (C: 

58、M: 29、Y: 100、K: 10)， 如 图 21-41 所 示 。 


童 朵 手 涉 汀 洁 喇 习 一 一 这 吉庆 运 导 习 订 册 1Z 小 


IGG 


图 21-40 ”打开 素材 文件 图 21-41 输入 文字 
ECDIS 单 击 【添加 图 层 样式 】 按 钮 素 ， 在 弹出 的 【添加 图 层 样式 】 菜 单 中 选择 【 投 
影 】 选 项 。 在 弹出 的 【图 层 样 式 】 对 话 框 中 进行 参数 设置 ， 如 图 21-42 所 示 。 
EGR 单 击 【确定 】 按 钮 ， 最 终 效果 如 图 21-43 所 示 。 


E33 el 


图 21-42 【图 层 样 式 】 对 话 框 
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2. 制作 内 阴影 效果 


应 用 【内 阴影 】 选 项 可 以 围绕 图 层 内 容 的 边缘 添加 内 阴影 效果 。 
ED 新建 一 个 宽度 为 400 像素 、 高 度 为 300 像素 的 空白 文件 ， 如 图 21-44 所 示 。 
ED 单 击 【确定 】 按 钮 ， 然 后 在 其 中 输入 文字 HAPPY， 如 图 21-45 所 示 。 


二 :和 本 1 
IPD): 上 


请 率 Rj: 96.012 
关公 机 式 (): R66 前 名 全 
青果 内 容 (Cj: 

BE 


图 21-44 【新 建 】 对 话 框 图 21-45 输入 文字 
EGRB) 单 击 【 添 加 图 层 样式 】 按 钮 态 . ， 在 弹出 的 【添加 图 层 样式 】 菜 单 中 选择 【内 阴 
影 】 选 项 。 在 弹出 的 【图 层 样式 】 对 话 框 中 进行 参数 设置 ， 如 图 21-46 所 示 。 
EEC 单 击 【确定 】 按 钮 后 会 产生 一 种 立体 化 的 文字 效果 ， 如 图 21-47 所 示 。 
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图 21-46 【图 层 样式 】 对 话 框 图 21-47 文字 效果 
3. 制作 文字 外 发 光 效 果 


应 用 【外 发 光 】 选 项 可 以 围绕 图 层 内 容 的 边缘 创建 外 部 发 光 效 果 。 

ED 新 建 一 个 宽度 为 400 像素 、 高 度 为 300 像素 的 空白 文件 ， 在 其 中 输入 文字 
Photoshop， 如 图 21-48 所 示 。 

EUD9 单 击 【添加 图 层 样式 】 按 钮 素 . ， 在 弹出 的 【添加 图 层 样式 】 菜 单 中 选择 【外 发 
光 】 选 项 。 在 弹出 的 【图 层 样式 】 对 话 框 中 进行 参数 设置 ， 如 图 21-49 所 示 。 

区 BY 单 击 【 确 定 】 按 钮 ， 最 终 效果 如 图 21-50 所 示 。 


全 


4. 制作 文字 内 发 光 效 果 

应 用 【内 发 光 】 选 项 可 以 围绕 图 层 内 容 的 边缘 创建 内 部 发 光 效 果 。 

EEITDp 新 建 一 个 宽度 为 400 像素 、 高 度 为 300 像素 的 空白 文件 ， 在 其 中 输入 文字 
Photoshop， 如 图 21-51 所 示 。 


[esa | | | ence = I 
Th 志 [ET Tr] 
Photoshop NN 
21-48 输入 文字 21-49 【图 层 样式 】 对 话 框 上 


图 21-50 文字 外 发 光 效果 图 21-51 输入 文字 
ECERP) 单 击 【添加 图 层 样式 】 按 钮 素 ， 在 弹出 的 【添加 图 层 样式 】 菜 单 中 选择 【内 发 
光 】 选 项 。 在 弹出 的 【图 层 样式 】 对 话 框 中 进行 参数 设置 ， 如 图 21-52 所 示 。 
EEJe 单 击 【确定 】 按 钮 ， 最 终 效果 如 图 21-53 所 示 。 
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21-52 【图 层 样式 】 对 话 框 图 21-53 文字 内 发 光 效果 


“9 多 


网 页 设计 与 网 站 建设 
案例 课堂 >… 


提 记 【内 发 光 】 的 设置 选项 和 【外 发 光 】 的 设置 选项 几乎 一 样 。 只 是 【外 发 光 】 设 置 

半 选项 中 的 【扩展 】〗】 选 项 变 成 了 【内 发 光 】〗 中 的 【阻塞 】 选 项 。 外 发 光 得 到 的 阴影 是 在 
图 层 的 边缘 ， 在 图 层 之 间 看 不 到 效果 的 影响 ; 而 内 发 光 得 到 的 效果 只 在 图 层 内 部 ， 即 
得 到 的 阴影 只 出 现在 图 层 的 不 透明 的 区 域 。 


21.2.2 ”案例 9 一 一 浮雕 效果 
应 用 【斜面 和 浮雕 】 样 式 可 以 为 图 层 内 容 添加 暗 调和 高 光 效果 ， 使 图 层 内 容 呈 现 凸 起 的 


立体 效果 。 

EDp 新 建 画 布 ， 大 小 为 400 像素 x200 像素 ， 输 入 文字 ， 如 图 21-54 所 示 。 

EDUDy 单 击 【添加 图 层 样式 】 按 钮 态 . ， 在 弹出 的 【添加 图 层 样式 】 菜 单 中 选择 【斜面 
和 浮雕 】 选 项 。 在 弹出 的 【图 层 样 式 】 对 话 框 中 进行 参数 设置 ， 如 图 21-55 所 示 。 


EE | 
和 mV) 


四 


[ED ERE 


图 21-54 输入 文字 图 21-55 【图 层 样式 】 对 话 框 

EEJe 最 终 形成 的 立体 文字 效果 如 图 21-56 所 示 。 
21.2.3 ”案例 10 一 一 又 加 效果 

图 层 样式 中 的 全 加 效果 包括 颜色 鳃 加 、 渐 变 姜 加 和 图 案 
合 加 3 种 ， 下 面 分 别 进行 详细 介绍 。 

1. 为 图 层 内 容 套印 颜色 

应 用 【颜色 全 加 】 选 项 可 以 为 图 层 内 容 套 印 颜色 。 

EEIDp 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-57 所 示 。 四 

EDD9 将 背景 图 层 转化 为 普通 图 层 ， 然 后 单 击 【 添 加 图 层 样式 】 按 钮 亦 . ， 在 弹出 的 


【添加 图 层 样式 】 菜 单 中 选择 【颜色 欠 加 】 选 项 。 在 弹出 的 【图 层 样 式 】 对 话 框 中 为 图 
像 倒 加 橘红 色 (C: 0、M: 53、Y: 100、K: 0)， 并 设置 其 他 参数 ， 如 图 21-58 所 示 。 
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21-56 ”斜面 与 浮雕 效果 
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图 21-57 ”打开 素材 文件 图 21-58 【图 层 样式 】 对 话 框 这 
ES 单 击 【 确 定 】 按 钮 ， 最 终 效果 如 图 21-59 所 示 。 是 


2. 为 图 层 内 容 套印 渐变 效果 

应 用 【 浙 变 基 加 】 选 项 可 以 为 图 层 内 容 套印 渐变 效果 。 

EC 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-60 所 示 。 

本 TY 将 背景 图 层 转化 为 普通 图 层 ， 然 后 单 击 【添加 图 
层 样式 】 按 钮 豆 . ， 在 弹出 的 【添加 图 层 样式 】 菜 单 
中 选择 【渐变 三 加 】 选 项 。 在 弹出 的 【图 层 样式 】 对 图 21-59 颜色 矢 加 效果 
话 框 中 为 图 像 添 加 渐变 效果 ， 并 设置 其 他 参数 ， 如 图 21-61 所 示 。 
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图 21-60 ”打开 素材 文件 图 21-61 【图 层 样 式 】 对 话 框 
ETE> 单 击 【确定 】 按 钮 ， 最 终 效 果 如 图 21-62 所 示 。 
3. 为 图 层 内 容 套印 图 案 混合 效果 
应 用 【图 案 营 加 】 选 项 可 以 为 图 层 内 容 套印 图 案 混合 效果 。 
在 原来 的 图 像 上 加 上 一 个 图 层 图 案 的 效果 ， 根 据 图 案 颜色 的 深浅 
在 图 像 上 表现 为 雕刻 效果 的 深浅 。 为 图 像 辩 加 图 案 的 具体 操作 步 
又 如 下 。 


EGGDDD 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-63 所 示 。 
本 TY 将 背景 图 层 转化 为 普通 图 层 ， 然 后 单 击 【添加 图 层 


网 页 设计 与 网 站 建设 
案例 课堂 >… 


样式 】 按 钮 房 -， 在 弹出 的 【添加 图 层 样式 】 菜 单 中 选择 【图 案 关 加 】 选 项 。 在 弹出 
的 【图 层 样 式 】 对 话 框 中 为 图 像 添加 图 案 ， 并 设置 其 他 参数 ， 如 图 21-64 所 示 。 
EEJSp 单 击 【 确 定 】 按 钮 ， 最 终 效果 如 图 21-65 所 示 。 


21-63 ”打开 素材 文件 图 21-64 【图 层 样式 】 对 话 杠 21-65 ”图 案 谷 加 效果 


全 使 用 中 要 注意 调整 图 案 的 不 透明 度 ， 否 则 得 到 的 图 像 可 能 只 是 一 个 放大 的 图 案 。 


21.3 ”网 页 图 像 效果 之 蒙 版 


在 Photoshop 中 有 一 些 具有 特殊 功能 的 图 层 ， 使 用 这 些 图 层 可 以 在 不 改变 图 层 中 原 有 图 像 
的 基础 上 制作 出 多 种 特殊 的 效果 ， 这 就 是 蒙 版 。 


21.3.1 案例 11 一 一 剪贴 蒙 版 


剪贴 蒙 版 是 一 种 非常 灵活 的 蒙 版 ， 它 可 以 使 用 下 层 图 层 中 图 像 的 形状 来 限制 上 层 图 像 的 
显示 范围 ， 因 此 可 以 通过 一 个 图 层 来 控制 多 个 图 层 的 显示 区 域 。 剪 贴 蒙 版 的 创建 和 修改 方法 
都 非常 简单 。 

下 面 使 用 自 定形 状 工具 制作 剪贴 蒙 版 特效 ， 具 体操 作 步 骤 如 下 。 

打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-66 所 示 。 

区 TY 设置 前 景色 为 黑色 ， 新 建 【 图 层 1】， 选 择 【 自 定形 状 工具 】 国 ， 然 后 在 属性 

栏 中 单 击 【 形 状 】 下 拉 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 红心 形状 ， 如 图 21-67 所 示 。 
ERY 将 新 建 的 图 层 放 到 最 上 方 ， 然 后 在 画面 中 拖 动 鼠标 绘制 该 形状 ， 如 图 21-68 所 示 。 
YY 选择 【 直 排 文字 蒙 版 工具 】 国 ， 在 画面 中 输入 文字 ， 设 置 字 体 为 华文 琥珀 ， 字 

号 为 50 点 。 设 置 完成 后 右 击 文字 图 层 ， 在 弹出 的 快捷 菜单 中 选择 【 栅 格 化 文字 】 命 

令 ， 如 图 21-69 所 示 。 
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图 21-68 绘制 形状 图 21-69 输入 文字 


本 于 BY 将 添加 的 文字 图 层 和 【图 层 1】 合 并， 并 将 合并 后 的 图 层 放 到 【图 层 0】 下 方 ， 如 
图 21-70 所 示 。 

SSTY 选择 【图 层 0】， 选 择 【 图 层 】 一 【创建 剪贴 蒙 版 】 菜 单 命令 ， 为 其 创建 一 个 前 

贴 蒙 版 ， 如 图 21-71 所 示 。 
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图 21-70 合并 图 层 图 21-71 创建 剪贴 蒙 版 


ED 为 剪贴 蒙 版 制作 一 个 背景 。 新 建 图 层 ， 放 置 到 最 底层 ， 将 图 层 颜 色 设置 为 深 灰 
色 ， 如 图 21-72 所 示 。 


‘3@ 


网 页 设计 与 网 站 建设 
案例 课堂 ~ 


图 21-72 为 蒙 版 添加 背景 色 
21.3.2 ”案例 12 一 一 快速 蒙 版 


应 用 快速 蒙 版 ， 会 在 图 像 上 创建 一 个 临时 的 屏蔽 ， 可 以 保护 所 选区 域 免 于 被 操作 ， 而 处 
于 蒙 版 范围 外 的 地 方 则 可 以 进行 编辑 与 处 理 。 
使 用 快速 蒙 版 为 图 像 制作 简易 边框 的 具体 操作 步骤 如 下 。 
EECDDp 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-73 所 示 。 
EDDD 新 建 一 个 图 层 ， 使 用 工具 箱 中 的 【矩形 选 框 工具 】 国 ， 在 图 像 中 创建 一 个 矩形 
选区 ， 如 图 21-74 所 示 。 


图 21-73 打开 素材 文件 图 21-74 绘制 矩形 


本 于 BY 单 击 工具 箱 下 方 的 【以 快速 蒙 版 模式 编辑 】 工 具 ， 或 按 Q 键 进入 快速 蒙 版 编辑 
模式 ， 如 图 21-75 所 示 。 

EC 选择 【 滤 镜 】 一 【扭曲 】 一 【波浪 】 菜 单 命令 ， 弹 出 【波浪 】 对 话 框 ， 设 置 相 
关 参 数 ， 如 图 21-76 所 示 。 


人 参数 可 以 自由 调整 ， 变 化 参数 后 可 得 到 不 同 效 果 的 边框 。 


2 提示 


ET 单 击 【确定 】 按 钮 返 
所 示 。 


EF 


图 像 界面 ， 图 像 四 周 已 经 有 简易 的 边框 模型 ， 如 图 21-77 


过 454 


站 二 


ECED 按 Q 键 ， 退 出 快速 蒙 版 编辑 模式 ， 得 到 一 个 新 的 选区 ， 如 图 21-78 所 示 。 
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图 21-75 ”快速 蒙 版 编辑 模式 21-76 【波浪 】 对 话 框 


GG 


图 21-77 ”添加 波浪 效果 图 21-78 得 出 选区 
EC 选择 【选择 】 一 【反选 】 菜 单 命令 ， 按 Delete 键 将 反选 后 的 选区 删除 ， 如 
图 21-79 所 示 。 
ER 新 建 图 层 置 于 底部 ， 并 填充 为 粉色 ， 如 图 21-80 所 示 。 


图 21-79 删除 选区 图 21-80 填充 颜色 
按 Ctrl+D 组 合 键 ， 取 消 选择 ， 这 样 图 像 简 易 边 框 制作 完成 ， 边 框 呈 均 匀 分 布 
的 不 规则 形状 ， 如 图 21-81 所 示 。 
EEJD 选择 【文件 】 一 【存储 为 】 菜 单 命令 ， 将 图 像 保 存 为 PG 格式 即 可 ， 如 图 21-82 
所 示 。 
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图 21-81 制作 画 框 效果 图 21-82 保存 图 片 
21.3.3 ”案例 13 一 一 图 层 蒙 版 


图 层 蒙 版 是 加 在 图 层 上 的 一 个 遮盖 ， 通 过 创建 图 层 蒙 版 来 隐藏 或 显示 图 像 中 的 部 分 或 全 
部 。 如 果 要 隐藏 当前 图 层 中 的 图 像 ， 可 以 使 用 黑色 涂抹 蒙 版 ， 如 果 要 显示 当前 图 层 中 的 图 
像 ， 可 以 使 用 白色 涂抹 蒙 版 ; 如 果 要 使 当前 图 层 中 的 图 像 呈现 半 透 明 效 果 ， 则 可 以 使 用 灰 
色 涂抹 蒙 版 。 

使 用 图 层 蒙 版 制作 水 中 倒影 的 具体 操作 步 又 如 下 。 

打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-83 所 示 。 

EEC 按 Ctrl+J 组 合 键 复制 当前 图 层 ， 生 成 【图 层 1】， 如 图 21-84 所 示 。 


图 4jpg @ 100%(RGR| 


图 21-83 ”打开 素材 文件 图 21-84 新建 图 层 
ES 选择 【图 像 】 一 【画布 大 小 】 菜 单 命令 ， 弹 出 【画布 大 小 】 对 话 框 ， 将 画布 高 
度 加 大 一 倍 ， 如 图 21-85 所 示 。 
EYP 选中 【图 民 1】， 选 择 【编辑 】 一 【变换 】 一 【垂直 翻转 】 菜 单 命令 ， 并 将 翻转 
后 的 图 像 垂 直 移动 到 下 方 ， 和 已 有 的 背景 图 层 对 接 ， 如 图 21-86 所 示 。 


Bn 按 Shift 键 可 以 使 图 像 季 直 或 水 平移 动 。 


EEJD 选择 【图 层 1】， 选 择 【 魔 棒 工 具 】， 将 【 容 差 】 设 置 为 255， 将 翻转 后 的 图 片 
选 为 选区 ， 使 用 【渐变 工具 】 绘 制 垂直 方向 的 黑白 渐变 ， 如 图 21-87 所 示 。 
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图 21-85 【画布 大 小 】 对 话 框 图 21-86 ”翻转 图 片 


四 TY 新 建 


镜 】 一 【 滤 镜 库 】 菜 单 命令 ， 打 开 【 滤 镜 库 】 对 话 框 ， 在 其 中 选择 【素描 】 一 【 半 
调 图 案 】 选 项 ， 打 开 【 半 调 图 案 】 对 话 框 ， 在 【图 案 类 型 】 下 拉 列 表 框 中 选择 【 直 


所 示 。 


21-87 


E> 进 择 
【确定 】 


言 射 半 济 | 沼 到 一 一 总 或 浊 壮 沼 习 末 由 Lz 沼 硬 ) 


-个 图 层 并 填充 为 白色 ， 再 按 D 键 把 前 景色 恢复 为 默认 的 黑白 。 选 择 【 滤 


GZ 


将 【大 小 】 设 置 为 7， 【对比 度 】 设 置 为 S0， 单 击 【确定 】 按 钮 ， 如 图 21-88 
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添加 渐变 效果 21-88 【 半 调 图 案 】 对 话 框 


【 滤 镜 】 一 【模糊 】 一 【高 斯 模糊 】 菜 单 命令 ， 将 【半径 】 设 置 为 4， 单 击 
安 钮 ， 如 图 21-89 所 示 。 


E> 接 Ctrlts 组 合 键 ， 保 存 文件 为 PSD 格式 ， 名 称 可 自行 定义 。 保 存 后 把 上 一 步 中 


制作 的 黑 


线条 图 层 隐藏 ， 新 建 一 个 图 层 ， 按 Ctrl+Shift+Alt+E 组 合 键 盖 印 图 层 ， 如 


图 21-90 所 示 。 


| 盖 印 图 层 是 将 所 有 可 见 图 层 合并 ， 然 后 再 执行 复制 。 
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网 页 设计 与 网 站 建设 
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画 | 
[mE | 

慑 有 

同 ?S() 
国 100% 国 
半径 (Rj: 40 | 像素 

图 21-89 【高 斯 模糊 】 对 话 框 21-90” 盖 印 图 层 


EE 选择 【 滤 镜 】 一 【扭曲 】 一 【置换 】 菜 单 命令 ， 打 开 【 置 换 】 对 话 框 ， 将 【水 
平 比例 】 设 置 为 4， 其 他 参数 保持 默认 配置 ， 单 击 【确定 】 按 钮 ， 如 图 21-91 所 示 。 
打开 【选取 一 个 置换 图 】 对 话 框 ， 在 其 中 选择 上 文保 存 的 PSD 文件 为 置换 文件 。 

ED 图 层 蒙 版 制作 结束 ， 已 经 可 以 看 到 三 杀 花 的 水 中 倒影 ， 而 且 还 呈现 了 波纹 的 效 
果 ， 如 图 21-92 所 示 。 


本 画 
水 平 比 他 00 《 
委 直 比 公 了 


置 的 图 
辣 地 以 话 言 


折 回 几 
本 重复 边境 像 素 BR) 


21-91 【和 置换 】 对 话 框 21-92 最终 的 效果 


21.3.4 ”案例 14 一 一 矢量 蒙 


矢量 蒙 版 是 由 钢笔 或 者 形状 工具 创建 的 ， 与 分 辩 率 无 关 的 蒙 版 ， 它 通过 路 径 和 矢量 形状 
来 控制 图 像 显示 区 域 ， 常 用 来 创建 Logo、 按 钮 、 面 板 或 其 他 Web 设计 元 素 。 
下 面 来 讲解 使 用 矢量 蒙 版 为 图 像 添加 心 形 的 方法 。 
EC 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-93 所 示 。 
ECDD 打开 随 书 光盘 中 的 另 一 个 素材 文件 。 使 用 【移动 工具 】 将 其 移动 到 step01 打开 
的 文件 中 ， 生 成 【图 层 1】。 选 择 【 编 辑 】-【 自 由 变换 】 菜 单 命令 ， 对 【图 层 1】 
中 的 图 片 进行 缩放 和 移动 操作 ， 移 动 到 合适 的 位 置 ， 如 图 21-94 所 示 。 


大 458 


图 21-93 打开 素材 文件 图 21-94 ”移动 素材 


EDDB) 隐藏 【图 层 1】， 设 置 前 景色 为 黑色 。 选 择 【 自 定形 状 工具 】 国 ， 并 在 属性 栏 
中 将 工具 模式 设置 为 【路 径 】， 再 单 击 【形状 】 下 拉 按 钮 ， 在 弹出 的 下 拉 列 表 中 选 
择 红心 形状 。 在 图 中 合适 的 位 置 绘制 红心 ， 并 按 Ctrl+T 组 合 键 对 形状 进行 变形 ， 如 
图 21-95 所 示 。 

EC 红心 路 径 调整 到 合适 位 置 后 ， 按 Enter 键 。 设 置 【 图 层 1】 可 见 ， 选 择 【 图 层 】 
一 【矢量 蒙 版 】 一 【当前 路 径 】 菜 单 命令 ， 蒙 版 效果 生成 ， 如 图 21-96 所 示 。 


之 揣 半 洒 洲 半 | 测 到 一 一 洁 歌 浊 歌 河 习 新 二 Lz 游 六 六 


pp GG 


图 21-95 ”绘制 形状 图 21-96 ”添加 蒙 版 效果 


21.4 ”网 页 图 像 效 果 之 通道 


Photoshop 中 的 通道 有 多 种 用 途 ， 它 可 以 显示 图 像 的 分 色 信息 、 存 储 图 像 的 选取 范围 和 记 
录 图 像 的 特殊 色 信息 。 


21.4.1 案例 15 一 一 复合 通道 


使 用 复合 通道 的 方法 可 以 制作 出 积 雪 和 飘 雪 的 效果 ， 具 体操 作 步 骤 如 下 。 

打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-97 所 示 。 

切换 到 【图 层 】 面 板 ， 右 击 背 景 图 层 ， 在 弹出 的 快捷 菜单 中 选择 【复制 图 层 】 
命令 ， 为 新 图 层 命名 为 “图 层 1”， 如 图 21-98 所 示 。 
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EN 


4 | 
Ri 
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21-97 ”打开 素材 文件 21-98 ”新 建 图 层 


了 提示 按 CtrlHJ 组合 键 ， 可 以 快速 复制 图 层 。 


EC 选择 【图 层 1】， 进 入 【通道 】 面 板 ， 选 择 比较 清晰 的 通道 ， 本 实例 选择 绿 通 道 ， 
拖 动 绿 通道 到 【创建 新 通道 】 按 钮 国 | 上， 生成 新 通道 【 绿 副本 】， 如 图 21-99 
所 示 。 

YY 选择 【 绿 副本 】 通 道 ， 选 择 【 滤 镜 】 一 【 滤 镜 库 】 菜 单 命令 ， 打 开 【 滤 镜 库 】 
对 话 框 ， 在 其 中 选择 【艺术 效果 】 一 【胶片 颗粒 】 选 项 ， 弹 出 【胶片 颗粒 】 对 话 
框 ， 根 据 需 求 调整 【颗粒 】、【 高 光 区 域 】、【 强 度 】 参 数 ， 单 击 【 确 定 】 按 钮 ， 
如 图 21-100 所 示 。 


21-99 【通道 】 面 板 图 21-100 【胶片 颗粒 】 对 话 框 


ED 返回 【通道 】 面 板 ， 选 择 【 绿 副本 】 通 道 ， 单 击 面板 下 方 的 【将 通道 作为 选区 
载 入 】 按 钮 一， 生成 选区 ， 按 Ctrl+C 组 合 键 复制 选区 ， 如 图 21-101 所 示 。 

EEC) 切换 到 【图 层 】 面 板 ， 新 建 图 层 ， 选 中 新 图 层 ， 按 CtltV 组 合 键 粘贴 复制 的 选 
区 ， 图 像 中 已 经 基本 呈现 出 被 积 雪 覆盖 的 感觉 ， 但 是 女孩 的 身体 和 脸 也 被 复制 的 选 
区 覆盖 ， 呈 现 白色 ， 如 图 21-102 所 示 。 

ED 使 用 工具 箱 中 的 【橡皮 擦 工具 】， 在 属性 栏 中 适当 调整 【大 小 】、【 硬 度 】、【 不 
透明 度 】、【 流 度 】 等 参数 ， 然 后 将 女孩 脸 部 和 身体 上 过 多 的 白色 擦 除 ， 如 图 21-103 
所 示 。 


全 oo 


EECSRD 将 己 有 的 三 个 图 层 合 并 ， 然 后 新 建 图 层 ， 命 名 为 “图 层 1”， 如 图 21-104 


所 示 。 


21-103 ” 擦 除 多 余部 分 


ECESRD 选择 【编辑 】 一 【填充 】 菜 单 命令 ， 弹 出 【填充 】 对 话 框 ， 在 【内 容 】 选 项 组 


r 


21-102 ”预览 效果 
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图 21-104 新建 图 层 


罗 GG 


的 【使 用 】 下 拉 列 表 框 中 选择 【50% 灰 色 】 选 项 ， 其 他 采用 默认 设置 ， 单 击 【 确 


定 】 按 钮 ， 如 图 21-105 所 示 。 
区 了 > 选中 【图 层 1】， 选 择 【 滤 镜 】 


一 【 杂 色 】 一 【添加 杂 色 】 菜 单 命令 ， 弹 出 【 添 


加 杂 色 】 对 话 框 ， 将 【数量 】 设 置 为 230%， 选 中 【平均 分 布 】 单 选 按钮 ， 单 击 【 确 


定 】 按 钮 ， 如 图 21-106 所 示 。 


大 于 画 
ns 世 枉 - 
证 用 (U): | 二 一 
混 吝 
模式 (M): 正常 
不 透明 度 (O》: 100 % 


回 保 信 透明 区 域 (p) 


21-105 【填充 】 对 话 框 


EEIDp 选择 【 滤 镜 】 一 【模糊 】 一 【 
框 ， 将 【半径 】 设 置 为 2 像素 ， 单 


动 坚 (Aj: 2731 。 为 


分 布 
加 于 均 扫 布 (U) 
(6) 


DPetM) 


21-106 【添加 杂 色 】 对 话 框 


高 斯 模糊 】 菜 单 命令 ， 弹 出 【高 斯 模糊 】 对 话 
【确定 】 按 钮 ， 如 图 21-107 所 示 。 
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@: 半径 确定 了 后 面 生成 雪花 的 密度 及 大 小 ， 读 者 可 自行 调整 几 种 半径 数值 ， 来 比较 
| 长 后 面 生成 雪花 的 密度 及 大 小 。 


EEIP)% 选择 【图 像 】 一 【调整 】 一 【 色 阶 】 菜 单 命令 ， 弹 出 【 色 阶 】 对 话 框 ， 将 【和 输 
入 色 阶 】 选 项 组 中 的 三 个 滑 块 向 中 间 移 动 ， 到 图 像 中 出 现 大 量 清晰 白 点 为 止 ， 单 击 
【 确定】 按钮 ， 如 图 21-108 所 示 。 


8(E)。 凡生 ss CE 
三 了 (eRe 
入 入 Mi(D): Bah(A) 
Eu 
Ed 
mp) 
a 
0 00 255 
金色 (0)}: 
a 
半径 (R): | 像素 0 255 
图 21-107 【高 斯 模糊 】 对 话 框 图 21-108 【 色 阶 】 对 话 框 


EEE 选择 【 滤 镜 】 一 【模糊 】 一 【动感 模糊 】 菜 单 命令 ， 调 整 【 角 度 】 为 65 度 ， 
【距离 】 为 10 像素 ， 单 击 【 确 定 】 按 钮 ， 如 图 21-109 所 示 。 
Sn 角度 用 于 确定 雪花 名 落 的 方向 ， 距 离 用 于 确定 雪花 靳 落 的 速度 ， 距 离 值 越 大 ， 雪 
SS 花 膨 落 速度 越 快 。 
EE》 选 择 【 图 民 】 一 【图 层 样式 】 一 【混合 选项 】 菜 单 命令 ， 设 置 【 混 合 模式 】 为 
【 变 亮 】，【 不 透明 度 】 为 60%， 单 击 【 确 定 】 按 钮 ， 如 图 21-110 所 示 。 
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ao) 10 色 
图 21-109 【动感 模糊 】 对 话 框 图 21-110 【图 层 样式 】 对 话 框 


EEC 返回 图 形 界面 ， 已 经 基本 呈现 雪花 效果 ， 但 是 人 物 在 雪花 中 显得 不 够 清晰 ， 如 
图 21-111 所 示 。 

EED 使 用 工具 箱 中 的 【橡皮 擦 工具 】， 在 属性 栏 中 适当 调整 【大 小 】、【 硬 度 】、 
【不 透明 度 】、【 流 度 】 等 参数 ， 然 后 将 遮挡 女孩 脸 部 的 雪花 抹 除 一 部 分 ， 使 女孩 
清秀 的 样 貌 显现 出 来 ， 如 图 21-112 所 示 。 
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图 21-111 制作 出 雪花 效果 图 21-112 ， 控 除 图 片 中 多 余 的 部 分 
21.4.2 ”案例 16 一 一 颜色 通道 


颜色 通道 是 在 打开 新 图 像 时 自动 创建 的 通道 ， 它 们 记录 了 图 像 的 颜色 信息 。 图 像 的 颜色 
模式 不 同 ， 颜 色 通道 的 数量 也 不 相同 。RGB 图 像 中 包含 红 、 绿 、 蓝 通道 和 一 个 用 于 编辑 图 像 
的 复合 通道 ，CMYK 图 像 包 含 青色 、 洋 红 、 黄 色 、 黑 色 通道 和 一 个 复合 通道 ， Lab 图 像 包含 
明度 、a、b 通道 和 一 个 复合 通道 ， 位 图 、 灰 度 、 双 色调 和 索引 颜色 图 像 都 只 有 一 个 通道 。 如 
图 21-113 所 示 分 别 是 不 同 的 颜色 通道 。 


21-113 ”各 种 图 片 格式 的 通道 面板 


下 面 使 用 颜色 通道 抠 出 图 像 中 的 文字 Logo。 
EEJDp 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-114 所 示 。 

ECEIDy 打开 【通道 】 面 板 ， 取 消 【 绿 】 和 【 蓝 】 两 个 通道 的 显示 ， 只 显示 【 红 】 通 
道 ， 可 以 看 出 图 像 中 文字 Logo 和 周围 图 像 的 颜色 差别 最 明显 ， 如 图 21-115 所 示 。 
葬 了 TBy 按 Cul 键 ， 拖 动 【 红 】 通 道 到 面板 下 方 的 【创建 新 通道 】 按 馈 甘 着 上， 产生 【 红 

副本 】 通 道 ， 如 图 21-116 所 示 。 
EC 选择 【编辑 】 一 【调整 】 一 【 色 阶 】 菜 单 命令 ， 弹 出 【 色 阶 】 对 话 框 ， 调 整 色 
阶 滑 块 ， 将 黑色 和 白色 滑 块 向 中 间 滑 动 ， 使 文字 更 黑 ， 文 字 周 边 颜 色 更 淡 ， 然 后 单 
击 【确定 】 按 钮 ， 如 图 21-117 所 示 。 
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图 21-114 ”打开 素材 图 片 图 21-115 【通道 】 面板 
en | 

(EEE 赵 - 户主 | 

了 |] 


如 看 (0): R63 
Ex | 


WT) ] 


a 
图 21-116 复制 通道 图 21-117 【 色 阶 】 对 话 框 


本 了 BY 将 前 景色 设置 为 白色 ， 选 择 工 具 箱 中 的 【橡皮 擦 工具 】， 先 使 用 值 较 大 的 橡皮 
擦 擦 除 多 余 的 黑色 区 域 ， 再 使 用 较 小 尺寸 的 橡皮 擦 将 文字 Logo 周围 的 多 余 颜 色 擦 
除 ， 如 图 21-118 所 示 。 

ERD) 擦 除 后 ， 得 到 黑色 的 文字 及 白色 的 背景 ， 由 于 调整 色 阶 的 问题 ， 文 字 可 能 出 现 

锯齿 边 ， 选 择 【 加 深 工具 】， 多 次 单 击 文 字 Logo， 如 图 21-119 所 示 。 


EEEE 


中 贝 CD 时 山 剑 训 


21-118 ” 控 除 多 余 颜 色 21-119 ”加 深 文字 


臣 于 DD 掖 Ctl 键 ， 单 击 【 通 道 】 面 板 中 的 【 红 副本 】 通 道 ， 将 白色 区 域 生成 为 选区 ， 
然后 选择 图 像 图 层 ， 除 了 文字 Logo 外 ， 所 有 图 像 都 在 选区 中 ， 如 图 21-120 所 示 。 
EEC) 按 Delete 键 ， 删 除 选区 内 容 ， 再 按 CtrltD 组 合 键 取消 选区 ， 得 到 完整 的 文字 

Logo， 如 图 21-121 所 示 。 


图 21-120 ”选择 选区 图 21-121 删除 选区 


EC 选择 工具 箱 中 的 【裁剪 工具 】 国 ， 拖 动 鼠 标 选中 图 像 中 除了 文字 Logo 以 外 的 
部 分 ， 按 Enter 键 执行 裁剪 ， 这 样 可 以 去 掉 多 余 的 空白 区 域 ， 如 图 21-122 所 示 。 
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21-122 文字 Logo 


做 好 的 文字 Logo 应 该 保存 为 png 格式 ， 因 为 png 格式 的 文件 可 以 使 用 透明 背 


21.4.3 ”案例 17 一 一 专 色 通道 


专 色 通 道 是 一 种 特殊 的 混合 油墨 ， 一 般 用 来 蔡 代 或 者 附加 到 图 像 颜色 油墨 中 。 一 个 专 色 
通道 都 有 属于 自己 的 印 版 ， 在 对 一 张 含 有 专 色 通 道 的 图 像 进行 印刷 输出 时 ， 专 色 通道 会 作为 
-个 单独 的 页 被 打印 出 来 。 
要 新 建 专 色 通道 ， 可 从 【通道 】 面 板 的 下 拉 菜 单 中 选择 【新 专 色 通 道 】 命 令 或 者 按 住 
Ctrl 键 并 单 击 【 创 建新 通道 】 医 国 按 钮 ， 即 可 弹出 【新 建 专 色 通道 】 对 话 框 ， 设 定 后 单 击 【 确 定 】 
按钮 ， 如 图 21-123 所 示 。 


新 建 二 通道 [| 
名 种: 本 而 确定 
油墨 特性 [| 


Me: 国 (5): 0 % 


图 21-123 【新 建 专 色 通 道 】 对 话 框 


(1) 【名 称 】 文 本 框 : 可 以 给 新 建 的 专 色 通 道 命名 。 在 默认 情况 下 将 自动 命名 为 “ 专 色 
1”“ 专 色 2” 等 ， 以 此 类 推 。 
(2) 【颜色 】 选 项 : 用 于 设 定 专 色 通道 的 颜色 。 


‘5@ 


(3) 【密度 】 文 本 框 : 可 


功能 对 实 
蒙 版 颜色 的 【透明 度 】。 


21-124 所 示 。 


EC) 打开 随 书 光盘 中 的 素材 “人 物 剪影 psd” 文 件 ， 如 图 


EEJDp 打开 【通道 】 面 板 ， 按 住 Ctrl 键 单 击 Alpha 1 通道 ， 在 图 
21-125 所 示 。 


图 


图 21-124 ”打开 素材 图 片 图 21-125 选中 人 物 选 区 


区 于 BY 按 住 Ctl 键 ， 单 击 【 通 道 】 面 板 下 方 的 【创建 新 通道 】 按 钮 是 ， 弹 
色 通道 】 对 话 框 ， 单 击 【颜色 】 色 块 ， 如 图 21-126 所 示 。 


际 的 打印 效果 没有 影响 ， 只 是 在 编辑 图 像 时 可 以 模拟 打印 的 效果 。 这 个 选项 类 似 于 


[以 设 定 专 色 通 道 的 密度 ， 其 范围 在 0% 一 100% 之 间 。 这 个 选项 的 


像 中 选中 人 物 选区 ， 如 


出 【新 建 专 


YY 弹出 【 拾 色 器 ( 专 色 )】 对 话 框 ， 设 置 颜色 为 黑色 ，R、G 和 B 三 个 文本 框 分 别 设 
置 为 0， 单 击 【和 确定】 按钮 ， 如 图 21-127 所 示 。 
ee 
-一 一 一 
[ET 
人 E33 ] 
民 Lo 
新 吉 专 色 基 通 Ez ， 
ti: ED 议定 [3 训 网 
泪 量 特性 [7 ss 0 的 
配 : age  » 重 a 二 
图 21-126 【新 建 专 色 通 道 】 对 话 框 图 21-127 【 拾 色 器 】 对 话 框 


EEJDp 返回 【新 建 专 色 通道 】 对 话 框 ， 单 击 【确定 】 按 钮 ， 如 图 21-128 所 示 。 


人 物 前 影 制作 成 功 ， 如 图 21-129 所 示 。 


Eo 3] 
| 3 
油墨 特 性 取消 


% 


ie: 国 BEs: 0 


人 物 剪影 


21-128 【新 建 专 色 通 道 】 对 话 框 图 21-129 
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21.4.4 ”案例 18 一 一 计算 法 通道 


计算 用 于 混合 两 个 来 自 一 个 或 多 个 源 图 像 的 单个 通道 ， 然 后 将 结果 应 用 到 新 图 像 或 新 通 
道中 。 下 面 使 用 计算 功能 ， 制 作 灰 色 图 像 效果 ， 其 具体 操作 步骤 如 下 。 
ECXDp 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-130 所 示 。 
EDpp 打开 【图 层 】 面 板 ， 选 择 背景 图 层 ， 然 后 按 Ctrl+J 组 合 键 ， 复 制 背景 图 层 ， 得 
到 【背景 副本 】 图 层 ， 如 图 21-131 所 示 。 


图 21-130 打开 素材 文件 图 21-131 复制 背景 图 层 


区 BY 选中 背景 图 层 ， 选 择 【图 像 】 一 【计算 】 菜 单 命令 ， 弹 出 【计算 】 对 话 框 ， 把 
【 源 1】 和 【 源 2】 选 项 组 中 的 【图 层 】 和 【通道 】 分 别 设 为 【背景 〗】 和 【 红 】， 色 
选 【 源 2】 选 项 组 中 的 【 反 相 】 复 选 框 ， 在 【混合 】 下 拉 列 表 框 中 选择 【正片 合 
底 】 选 项 ， 将 【不 透明 度 】 设 为 100%， 单 击 【确定 】 按 钮 ， 如 图 21-132 所 示 。 
EC 打开 【通道 】 面 板 ， 产 生 新 通道 Alpha 1， 单 击 面 板 下 方 的 【将 通道 作为 选区 载 
入 】 按 馈 独 有， 如 图 21-133 所 示 。 
得 画 
源 1(5); 2Jp0 be [mm | 


图 (UL): 背景 
通道 (Ch 红 ~ CRD 


源 2fu): 2Jp0 
图 民 Y} 背 时 - 
通用 H} 红 ~ 团 相 (V) 
混 各 (8) 正片 大 度 

不 吉明 广 (OF 100 。 哆 

回 芝 版，… 


引 采 (R)。 基建 请 首 


图 21-132 【计算 】 对 话 框 图 21-133 【通道 面板 


国 于 BY 返回 到 【图 层 】 面 板 ， 单 击 图 层面 板 下 方 的 【创建 新 的 填充 或 调整 图 层 】 按 
钮 ， 在 弹出 的 下 拉 列 表 中 选择 【 色 阶 】 选 项 ， 打 开 【 色 阶 】 调 整 面板 ， 在 RGB 通道 
下 把 输入 色 阶 设 为 0、3.65、255， 输 出 色 阶 设 为 0、255， 如 图 21-134 所 示 。 

EC 单 击 【 创 建新 的 填充 或 调整 图 层 】 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 【通道 混合 
器 】 选 项 ， 打 开 【 通 道 混合 器 】 调 整 面板 ， 在 【输出 通道 】 下 拉 列 表 框 中 选择 【 灰 
色 】， 色 选 【 单 色 】 复 选 框 ， 拖 动 颜色 滑 块 ， 调 至 满意 为 止 ， 如 图 21-135 所 示 。 


童 朵 手 涉 汕 汗 喇 习 一 一 当 吉 庆 运 导 习 三 几 1Z 小 目 


多 NB 


. 
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网 页 设计 与 网 站 建设 
案例 课堂 >… 


ED 选择 最 项 端的 【背景 副本 】 图 层 ， 选 择 【 滤 镜 】 一 【模糊 】 一 【高 斯 模糊 】 
菜单 命令 ， 弹 出 【高 斯 模糊 】 对 话 框 ， 设 置 【半径 】 为 10 像素 ， 单 击 【 确 定 】 按 
钮 ， 如 图 21-136 所 示 。 


日 :mw 日 


帮 径 (R): 10 | 像素 


图 21-134 ”调整 色 阶 图 21-135 ”通道 混合 器 图 21-136 【高 斯 模糊 】 对 话 杠 
EC 选择 【图 层 】 一 【图 层 样式 】 一 【混合 选项 】 荣 单 命令 ， 弹 出 【图 层 样式 】 对 
话 框 ， 将 【混合 模式 】 设 为 【 柔 光 】， 按 住 Alt 键 调节 【混合 颜色 带 】， 至 满意 为 
止 ， 单 击 【 确 定 】 按 钮 ， 如 图 21-137 所 示 。 
ED) 返回 到 【图 层 】 面 板 ， 新 建 一 个 图 层 ， 按 CtrltAlt+ShifttE 组 合 键 盖 印 可 见 图 
层 ， 如 图 21-138 所 示 。 


et 
en E 
be 于 网 号 个 一 
志 两 
cj 
uy Fe ~ il- 
ee HEN) 
ou a - 
各 局 不 国 缚 ): 
pa ns le 


图 21-137 【图 层 样式 】 对 话 框 图 21-138 盖 印 图 层 
EC 打开 【通道 】 面 板 ， 将 Alpha 1 设置 为 不 可 见 ， 灰 色 图 像 效 果 生 成 ， 如 图 21-139 
所 示 。 


21-139 ”最 终 的 图 像 效 果 
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21.5 一 键 制作 网 页 图 像 效 果 之 滤 镜 


在 Photoshop CS6 中 ， 有 图 像 处 理 传 统 滤 镜 和 一 些 新 滤 镜 ， 每 一 种 滤 镜 又 提供 了 多 种 细 分 
的 滤 镜 效果 ， 为 用 户 处 理 图 像 提供 了 极 大 的 方便 。 


21.5.1 案例 19 一 一 【镜头 校正 】 滤 镜 


使 用 【镜头 校正 】 滤 镜 可 以 调整 图 像 角 度 ， 使 因 拍 摄 角度 不 好 造成 的 倾斜 瞬间 校正 。 具 
体操 作 步 又 如 下 。 
EEC 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-140 所 示 。 
EEJD2p 选择 【 滤 镜 】 一 【镜头 校正 】 菜 单 命令 ， 弹 出 【镜头 校正 】 对 话 框 ， 选 择 左 侧 
的 【 拉 直 工具 】 喇 ， 在 倾斜 的 图 形 中 绘制 一 条 直线 ， 该 直线 用 于 定位 调整 后 图 像 正 
确 的 垂直 轴线 ， 可 以 选择 图 像 中 的 参照 物 拉 直线 ， 如 图 21-141 所 示 。 


宇 财 竹 泪 汀 小 喇 习 一 少 坟 向 进 半 习 族 几 1Z 波 


21-140 ”打开 素材 文件 21-141 【镜头 校正 】 对 话 框 


ES 拉 好 直线 后 释放 鼠标 ， 图 像 自动 调整 角度 ， 一 次 没有 调整 好 ， 可 以 重复 多 次 操 
作 ， 使 本 来 倾斜 的 图 像 变 得 很 正 ， 如 图 21-142 所 示 。 

EC 调整 完成 后 ， 单 击 【确定 】 按 钮 ， 返 回 图 像 界 面 ， 图 像 校正 后 的 效果 如 图 21-143 
所 示 。 


图 21-142 多 次 校正 图 21-143 ”校正 后 的 效果 
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网 页 设计 与 网 站 建设 
-案例 课 演 四 一 


2 玛 校正 后 倾斜 的 四 边 会 被 自动 裁剪 摔 。 


21.5.2 ”案例 20 一 一 【消失 点 】 滤 镜 


利用 【消失 点 】 滤 镜 可 以 在 包含 透视 平面 的 图 像 中 进行 透视 校正 编辑 。 使 用 【消失 点 】 
滤 镜 可 以 在 图 像 中 指定 平面 ， 然 后 对 平面 中 的 图 像 做 绘画 、 仿 制 、 复 制 、 粘 贴 、 变 换 等 编辑 
操作 。 所 有 编辑 操作 都 将 采用 用 户 所 处 理 平面 的 透视 。 
利用 【消失 点 】 滤 镜 ， 不 再 只 仅仅 将 图 像 作为 一 个 单一 平面 进行 编辑 操作 ， 可 以 以 立体 
方式 在 图 像 中 的 透视 平面 上 操作 。 使 用 【消失 点 】 滤 镜 来 修饰 、 添 加 或 移 去 图 像 中 的 内 容 
时 ， 结 果 将 更 加 逼真 ， 因 为 系统 可 正确 确定 这 些 编辑 操作 的 方向 ， 并 且 将 它们 缩放 到 透视 
平面 。 
下 面 使 用 【消失 点 】 滤 镜 去 除 照片 中 的 多 余人 物 ， 有 具体 操作 步骤 如 下 。 
EECJDp 打开 随 书 光盘 中 的 素材 文件 ， 在 照片 背景 中 有 一 个 小 女孩 可 以 将 其 去 除 ， 如 
图 21-144 所 示 。 
EC) 选择 【 滤 镜 】 一 【消失 点 】 菜 单 命令 ,弹出 【消失 点 】 对 话 框 ， 使 用 左 侧 的 
【创建 平面 工具 】 按 钮 加， 如 图 21-145 所 示 。 


国 
a 
a 


21-144 ”打开 素材 文件 21-145 【消失 点 】 对 话 框 


本 于 BY 通过 单 击 的 方式 在 女孩 所 在 的 区 域 创建 平面 ， 平 面 创建 成 功 ， 平 面 由 边 点 构 
成 ， 线 条 呈现 蓝 色 ， 表 示 四 个 顶点 在 同一 个 平面 上 ， 可 以 拖 电 平面 的 顶点 调整 平 
面 ， 如 图 21-146 所 示 。 

EEC 选择 【编辑 平面 工具 】 按 钮 时 ， 拖 动 平面 的 四 边 可 以 拉 伸 平面 ， 扩 大 平面 范 
围 ， 调 整 【 网 格 大 小 】 参 数 ， 可 以 变换 网 格 密度 ， 如 图 21-147 所 示 。 

ED 选择 【 选 框 工具 】， 在 平面 内 绘制 一 个 选区 ， 该 选区 用 作 填 充 女 孩 ， 设 置 【 羽 
化 】 值 为 0，【 不 透明 度 】 为 100%， 在 【修复 】 下 拉 列 表 框 中 选择 【 开 】 选 项 ， 如 
图 21-148 所 示 。 

EC 按 住 Alt 键 拖 动 选区 ， 和 覆盖 女 孩 图 像 区 域 ， 尽 量 使 覆盖 后 的 图 像 与 原 图 像 吻合 ， 
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可 以 重复 以 上 操作 ， 执 行 多 次 选区 覆盖 ， 如 图 21-149 所 示 。 


ReGlEslnlsrllys 


图 21-148 ”绘制 选区 图 21-149 覆盖 多 余部 分 


SS 女孩 阴影 还 留 在 图 像 中 ， 在 女孩 阴影 区 域 创建 平面 ， 平 面 中 不 能 包含 必须 保留 


的 图 像 内 容 ， 如 前 面 的 人 物 图 像 ， 所 以 在 构建 阴影 平面 时 ， 不 宜 过 大 ， 如 图 21-150 
所 示 。 
依照 上 述 方式 ， 将 女孩 的 阴影 去 掉 ， 如 图 21-151 所 示 。 


Palisiels 


PTE 


图 21-150 去除 阴影 部 分 图 21-151 抹 掉 多 余部 分 
E> 单 击 【确定 】 按 钮 后 ， 返 回 图 像 界 面 ， 女 孩 已 经 从 图 像 中 去 除 ， 如 图 21-152 
所 示 。 


网 页 设计 与 网 站 建设 
案例 课堂 四 一 


NN 图 21-152 ”图 像 的 最 终 效果 
21.5.3 ”案例 21 一 一 【 风 】 滤 镜 


通过 【 风 】 滤 镜 可 以 在 图 像 中 放置 细小 的 水 平 线条 来 获得 风 吹 的 效果 。 方 法 包括 
【 风 】、【 大 风 】( 用 于 获得 更 生动 的 风 效果 ) 和 【飓风 】( 使 图 像 中 的 线条 发 生 偏 移 )。 
EEJogp 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-153 所 示 。 
EEJDp 选择 【 滤 镜 】 一 【风格 化 】 一 【 风 】 菜 单 命令 ， 在 弹出 的 【 风 】 对 话 框 中 进行 
设置 ， 如 图 21-154 所 示 。 
EGRB) 单 击 【 确 定 】 按 钮 即 可 为 图 像 添加 风 效果 ， 如 图 21-155 所 示 。 


MR 


方 和 
音信 加 
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图 21-153 ”打开 素材 文件 图 21-154 【 风 】 对 话 框 图 21-155 添加 风 效 果 
21.5.4 ”案例 22 一 一 【马赛 克 拼 贴 】 滤 镜 


使 用 【马赛 克 拼 贴 】 滤 镜 演 染 图 像 ， 可 使 图 像 看 起 来 是 由 小 的 碎片 或 拼 贴 组 成 ， 然 
后 在 拼 贴 之 间 灌浆 。 
EEIDgp 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-156 所 示 。 
ECEJRP9 选择 【 滤 镜 】 一 【 滤 镜 库 】 一 【纹理 】 一 【马赛 克 拼 贴 】 菜 单 命令 ， 在 弹出 的 
【马赛 克 拼 贴 】 对 话 框 中 进行 参数 设置 ， 如 图 21-157 所 示 。 


参 472 


[es 


图 21-156 打开 素材 文件 图 21-157 【马赛 克 拼 贴 】 对 话 框 
【马赛 克 拼 贴 】 对 话 框 中 的 各 个 参数 如 下 。 


(1) 【 拼 贴 大 小 】: 用 来 设置 图 像 中 生成 的 块 状 图 形 的 大 小 。 NN 
(2) 【 颖 隙 宽度 】: 用 来 设置 块 状 图 形 单元 间 的 裂缝 宽度 。 NN 
(3) 【加 亮 缝隙 】: 用 来 设置 块 状 图 形 缝隙 的 亮度 。 


童 朵 六 涉 测 洁 喇 习 一 一 湖 坦 出 赤 导 习 乒 机 Lz 小 


EE> 单 击 【确定 】 按 钮 即 可 为 图 像 添 加 马赛 克 拼 贴 效果 ， 如 图 21-158 所 示 。 


21-158 马赛 克 拼 贴 效 果 


21.5.5 “案例 23 一 一 【旋转 扭曲 】 滤 镜 


使 用 【旋转 扭曲 】 滤 镜 可 以 使 图 像 围绕 轴 心 扭曲 ， 生 成 渡 涡 的 效果 。 下 面 使 用 【旋转 扭 
曲 】 滤 镜 制作 彩色 流 涡 效果 ， 其 具体 操作 步骤 如 下 。 
本 TY 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-159 所 示 。 
EEC 选择 【 滤 镜 】 一 【扭曲 】 一 【旋转 扭曲 】 菜 单 命 令 ， 弹 出 【旋转 扭曲 】 对 话 
框 ， 调 整 【 角 度 】 值 ， 向 左 滑动 滑 块 呈现 逆 时 针 洲 涡 效果 ， 向 右 滑 动 呈 现 顺 时 针 液 
涡 效 果 ， 如 图 21-160 所 示 。 
EC 单 击 【确定 】 按 钮 ， 返 回 图 像 界 面 ， 生 成 图 像 效 果 如 图 21-161 所 示 。 
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网 页 设计 与 网 站 建设 
案例 课堂 9 一 


图 21-159 打开 素材 文件 图 21-160 【旋转 扭曲 】 对 话 框 图 21-161 旋转 扭曲 后 的 效果 


pr 【旋转 捏 曲 】 滤 镜 产生 的 湾 涡 是 以 整个 图 像 中 心 为 圆心 的 ， 如 果 要 对 图 像 中 的 某 
AS ”一 个 区 域 执行 旋转 捏 曲 ， 可 以 先 将 该 区 域 选 为 选区 ， 再 执行 旋转 捏 曲 操作 。 


21.5.6 ”案例 24 一 一 【模糊 】 滤 镜 


使 用 【模糊 】 滤 镜 ， 可 以 让 清晰 的 图 像 变 成 各 种 模糊 效果 ， 可 以 做 快速 跟 拍 、 车 轮 滚动 

下 面 模 拟 高 速 跟 拍 效果 ， 有 具体 操作 步骤 如 下 。 

EEDp 打开 随 书 光盘 中 的 素材 文件 ， 图 片 中 的 汽车 是 静止 或 缓慢 行驶 的 ， 如 图 21-162 
所 示 。 

四 TY 按 用 Ctrl+J 组 合 键 复制 背景 图 层 ， 得 到 【图 层 1】， 如 图 21-163 所 示 。 


图 21-162 ”打开 素材 文件 图 21-163 ”复制 图 层 


EEJB) 选择 【图 层 1】， 选 择 【 滤 镜 】 一 【模糊 】 一 【动感 模糊 】 菜 单 命令 ， 弹 出 【 动 
感 模糊 】 对 话 框 ， 设 置 【 角 度 】 为 接近 水 平 ，【 距 离 】 为 12 像素 ， 单 击 【 确 定 】 按 
钮 ， 如 图 21-164 所 示 。 

EC 返回 图 像 界面 ， 整 个 图 片 已 经 有 模糊 的 效果 ， 汽 车 呈现 动感 ， 如 图 21-165 所 
示 ， 但 是 在 高 速 跟 拍 时 应 该 是 背景 模糊 ， 汽 车 清晰 。 

TY 选择 工具 箱 中 的 【橡皮 擦 工具 】， 在 属性 栏 中 选择 【 柔 边 圆 】 橡 皮 擦 样式 ， 
【大 小 】 和 【硬度 】 可 自行 调整 ， 如 图 21-166 所 示 。 


使 474 


ERD 使 用 设置 好 的 橡皮 擦 工具 ， 在 车 身 部 位 擦 除 ， 最 终 可 以 得 到 相对 清晰 的 车 身 和 
较 模 糊 的 背景 ， 使 汽车 有 快速 飞驰 的 效果 ， 如 图 21-167 所 示 。 


CR 
[Es ”en 
局) 
日 mw 回 
FA 医大) 
IE) 12 色素 


21-164 【动感 模糊 】 对 话 框 


21-165 ”应 用 模糊 后 的 效果 


图 屋 


图 21-166 设置 橡皮 擦 工具 参数 图 21-167 最 终 效 果 
21.5.7 ”案例 25 一 一 【 泻 染 】 滤 镜 


大 部 分 的 滤 镜 都 需要 有 源 图 像 做 依托 ， 在 源 图 像 的 基础 上 进行 滤 镜 变换 。 但 是 【 泻 染 】 
滤 镜 其 自身 就 可 以 产生 图 形 ， 比 如 典型 的 云彩 滤 镜 ， 它 利用 前 景 和 背景 色 来 生成 随机 云雾 效 
果 。 由 于 是 随机 的 ， 所 以 每 次 生成 的 图 像 都 不 相同 。 
下 面 使 用 云彩 滤 镜 制作 一 个 简单 的 云彩 特效 ， 具 体操 作 步 又 如 下 。 
EC 选择 【文件 】 一 【新 建 】 菜 单 命 令 ， 弹 出 【新 建 】 对 话 框 ， 创 建 一 个 500 像素 x500 
像素 、 白 色 背 景 的 文件 ， 单 击 【确定 】 按 钮 ， 如 图 21-168 所 示 。 
ERDp 采用 默认 的 黑色 前 景色 和 白色 背景 色 ， 选 择 【 滤 镜 】 一 【 泻 染 】 一 【分 层 云彩 】 
菜单 命令 ， 然 后 重复 按 CtrltF 组 合 键 重复 使 用 分 层 云彩 5 一 10 次 ， 得 到 如 图 21-169 
所 示 的 灰 度 图 像 。 
EC) 选择 【图 像 】 一 【调整 】 一 【渐变 映射 】 菜 单 命令 ， 弹 出 【渐变 映射 】 对 话 
框 ， 默 认 显示 黑白 渐变 ， 单 击 渐变 条 ， 如 图 21-170 所 示 。 
EC 弹出 【渐变 编辑 器 】 对 话 框 ， 在 渐变 条 下 方 单 击 可 添加 色 标 ， 双 击 色 标 可 打开 
选择 色 标 颜色 的 对 话 框 ， 依 图 21-171 所 示 分 别 为 色 标 添加 黑 、 红 、 黄 、 白 4 种 颜 
色 ， 单 击 【确定 】 按 钮 。 


童 财 手 水 汀 汗 喇 习 一 一 当 吉 庆 运 习习 三。 几 1Z 小 目 
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图 21-170 【渐变 映射 】 对 话 框 21-171 【渐变 编辑 器 】 对 话 框 


臣 于 BY 返回 到 图 像 界面 ， 显 示 如 图 21-172 所 示 的 云彩 效果 ， 效 果 略 显 生 硬 。 


EC 右 击 图 层 ， 在 弹出 的 快捷 菜单 中 选择 【转换 为 智能 对 象 】 命 令 ， 将 图 层 转换 为 
智能 对 象 ， 如 图 21-173 所 示 。 


21-172 云彩 效果 


图 21-173 ”转换 为 智能 对 象 


可 


ET 选择 【 滤 镜 】-【 模 糊 】-【 径 向 模糊 】 菜 单 命令 ， 弹 出 【 径 向 模糊 】 对 话 
框 ， 设 置 【数量 】 为 80，【 模 糊 方法 】 为 【缩放 】，【 品 质 】 为 【最 好 】， 在 【中 
心 模糊 】 区 域 中 用 鼠标 拖 动 ， 调 整 径 向 模糊 的 中 心 ， 单 击 【 确 定 】 按 钮 ， 如 图 21-174 
所 示 。 

EDUD) 调整 后 效果 如 图 21-175 所 示 ， 云 彩 呈现 放射 状 模糊 。 


言 淋 半 北 洲 H| 河 到 一 一 洁 部 间 玛 河 习 打 需 Lz 汝 前 年 


GG 


图 21-174 【 径 向 模糊 】 对 话 框 图 21-175 ”显示 效果 
ED 双击 【图 层 】 面 板 中 【图 层 0】 下 方 【 径 向 模糊 】 后 的 箭头 ， 如 图 21-176 所 示 。 
EGR 弹出 【混合 选项 ( 径 向 模糊 )】 对 话 框 ， 在 【模式 】 下 拉 列 表 框 中 选择 【 变 亮 】 选 
项 ， 单 击 【 确 定 】 按 钮 ， 如 图 21-177 所 示 。 


BE) [| 
模式 (M); 安 训 - 与 于 = 
不 透明 度 (0 国耻 |% [Es > | 
7 可 3) 
日 10% 回 
图 21-176 【图 层 】 面 板 图 21-177 【混合 选项 】 对 话 框 


EC) 返回 图 像 界面 ， 得 到 最 终 的 云彩 效果 ， 如 图 21-178 所 示 。 
em 由 于 云彩 图 形 是 随机 产生 的 ， 不 一 定 全 部 满足 需求 ， 可 以 剪 切 其 中 一 部 分 云彩 效 
外 有 果 使 用 。 
另外 ， 在 制作 云彩 效果 时 ， 使 用 的 渐变 映射 的 颜色 不 同 ， 得 出 的 效果 也 有 很 大 差异 ， 例 
如 选择 蓝 白 相间 的 渐变 颜色 ， 如 图 21-179 所 示 。 
依照 上 述 步 又 操作 ， 可 以 得 到 如 图 21-180 所 示 的 蓝天 白云 的 效果 。 


7®@ 


图 21-178 最 后 的 云彩 效果 ”图 21-179 【渐变 编辑 器 】 对 话 框 图 21-180 ”蓝天 白云 效果 
21.5.8 ”案例 26 一 一 【艺术 效果 】 滤 镜 


使 用 【艺术 效果 】 滤 镜 可 以 生成 各 种 个 性 的 效果 ， 这 里 以 【塑料 包装 】 艺 术 效果 为 例 制 
作 特 效 魔 圈 ， 有 具体 操作 步骤 如 下 。 
区 于 按 CtrltN 组 合 键 ， 弹 出 【新 建 】 对 话 框 ， 创 建 一 个 500 像素 x500 像素 的 文件 ， 
背景 色 采 用 黑色 ， 如 图 21-181 所 示 。 
EEJDp 按 Ctrl+J 组 合 键 ， 复 制 背 景 图 层 ， 生 成 【图 层 1】， 如 图 21-182 所 示 。 
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图 21-181 【新 建 】 对 话 框 图 21-182 ”复制 图 层 


ECEITes 选择 【图 层 1】， 选 择 【 滤 镜 】 一 【 演 染 】 一 【镜头 光 晕 】 菜 单 命令 ， 弹 出 【 镜 
头 光 晕 】 对 话 框 ， 适 当 调 整 【 亮 度 】， 在 小 窗口 中 调整 光 晕 中 心 位置 ， 至 图 形 中 
心 ， 单 击 【 确 定 】 按 钮 ， 如 图 21-183 所 示 。 

S53Y》 选择 【 滤 镜 】 一 【艺术 效果 】 一 【塑料 包装 】 菜 单 命令 ， 弹 出 【塑料 包装 】 对 
话 框 ， 调 整 右 侧 的 【高 光 强度 】、【 细 节 】 和 【平滑 度 】 参 数 ， 单 击 【 确 定 】 按 
钮 ， 如 图 21-184 所 示 。 

ED 返回 图 像 界 面 ， 按 Ctrl+J 组 合 键 ， 复 制 当前 图 层 ， 如 图 21-185 所 示 。 

EEJD 双击 【图 层 副本 】， 弹 出 【图 层 样式 】 对 话 框 ， 设 置 【 混 合 模式 】 为 【车 
加 】， 单 击 【 确 定 】 按 钮 ， 如 图 21-186 所 示 。 


条 478 


a 


宇 导 手 涉 汀 洁 喇 习 一 一 当 吉 庆 运 导 习 放 几 1Z 游 站 


EE 


图 21-183 【镜头 光 晕 】 对 话 框 图 21-184 【塑料 包装 】 效 果 
画 
a [om] 
RAB: ER 
Sr 和 [Ri 
区 Fama 5 画 RE 
她 可 DV) 


副 夺 四 Rs) Glo) 四 


21-185 ”复制 当前 图 层 图 21-186 【图 层 样式 】 对 话 框 


EEIDp 选择 【编辑 】 一 【调整 】 一 【色相 /饱和 度 】 菜 单 命令 ， 弹 出 【色相 /饱和 度 】 对 
话 框 ， 调 整 【 色 相 】、【 饱 和 度 】 和 【明度 】 参 数 ， 单 击 【 确 定 】 按 钮 ， 如 图 21-187 
所 示 。 

EEJE 返回 图 像 界面 ， 得 到 如 图 21-88 所 示 的 蓝 色魔 圈 效 果 。 


RR 
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21-187 【色相 /饱和 度 】 对 话 框 图 21-188 ” 蓝 色魔 圈 效 果 
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21.6 ”实战 演练 


使 用 【应 用 图 像 】 命 令 可 以 对 图 像 的 图 层 和 通道 进行 混合 与 蒙 版 操作 ， 可 以 用 于 执行 色 
彩 调整 等 操作 。 例 如 ， 拍 摄 的 图 片 由 于 曝光 等 问题 ， 有 可 能 会 发 红 ， 这 种 图 片 就 可 以 使 用 
【应 用 图 像 】 命 令 进行 调整 ， 具 体操 作 步 骤 如 下 。 
EE 打开 随 书 光盘 中 的 素材 文件 ， 如 图 21-189 所 示 。 
ET 选择 【图 像 】- 【应 用 图 像 】 菜 单 命令 ， 弹 出 【应 用 图 像 】 对 话 框 ， 在 【 通 
道 】 下 拉 列 表 框 中 选择 【 绿 】， 在 【混合 】 下 拉 列 表 框 中 选择 【 滤 色 】， 将 【不 透 


校正 偏 红 图 片 


明度 】 设 为 50%， 勾 选 【 蒙 版 】 复 选 框 ， 在 【通道 】 下 拉 列 表 中 选择 【绿色 】， 并 
勾 选 【 反 相 】 复 选 框 ， 设 置 完成 后 单 击 【 确 定 】 按 钮 ， 如 图 21-190 所 示 。 
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21-189 ”打开 素材 文件 


图 21-190 【应 用 图 像 】 对 话 框 


ECDIS 打开 【应 用 图 像 】 对 话 框 ， 使 用 同样 方法 对 蓝 色 通 道 执行 滤 色 操作 ， 如 图 21-191 


所 示 。 


EEIzp 打开 【应 用 图 像 】 对 话 框 ， 在 【通道 】 下 拉 列 表 框 中 选择 RGB， 在 【混合 】 下 
拉 列 表 框 中 选择 【 变 暗 】， 将 【不 透明 度 】 设 置 为 100%， 单 击 【确定 】 按 钮 ， 


如 图 21-192 所 示 。 
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21-191 ”设置 参数 


21-192 ”设置 混合 参数 


区 于 BY 打开 【应 用 图 像 】 对 话 框 ， 在 【通道 】 下 拉 列 表 框 中 选择 【 红 】， 在 【混合 】 
下 拉 列 表 框 中 选择 【正片 车 底 】， 将 【不 透明 度 】 设 置 为 100%， 勾 选 【 蒙 版 】 复 选 
框 ， 在 【通道 】 下 拉 列 表 框 中 选择 【 红 】， 勾 选 【 反 相 】 复 选 框 ， 单 击 【 确 定 】 按 
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| 
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第 
钮 ， 如 图 21-193 所 示 。 S 
EB 返回 图 像 ， 可 以 看 到 红色 已 经 减 淡 ， 但 是 还 是 有 些微 微 泛 红 ， 可 以 使 用 曲线 工 。 章 
具 再 做 微调 ， 如 图 21-194 所 示 。 
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图 委 (M): 团 9jpe 素 
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21-193 【应 用 图 像 】 对 话 框 (2) 21-194 图像 效果 


EC 选择 【图 像 】 一 【调整 】 一 【曲线 】 菜 单 命令 ， 打 开 【 曲 线 】 对 话 框 ， 在 【 通 
道 】 下 拉 列 表 框 中 选择 【 红 】， 单 击 曲线 中 间 ， 向 下 拖 动 ， 当 图 像 颜色 调整 得 差 不 
多 时 释放 鼠标 ， 单 击 【 确 定 】 按 钮 ， 如 图 21-195 所 示 。 

葬 于 BY 调整 结束 ， 图 像 已 经 没有 泛 红 的 感觉 ， 如 图 21-196 所 示 。 
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图 21-195 【曲线 】 对 话 框 21-196 最终 效果 


-| 使 用 【应 用 图 像 〗】 命 令 校正 偏 红 图 像 时 ， 要 结合 偏 红 程度 做 参数 调整 ， 这 就 要 求 
操作 者 对 图 像 的 颜色 构成 有 基本 的 了 解 。 


21.7” 跟 我 练 练 手 
21.7.1 练习 目标 


能 够 熟练 掌握 本 章 所 讲 内 容 。 
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21.7.2 上 机 练习 


练习 1: 应 用 图 层 制作 图 像 。 
练习 2: 应 用 图 层 样式 制作 图 像 。 
练习 3: 应 用 蒙 版 制作 图 像 。 
练习 4: 应 用 通道 制作 图 像 。 
练习 5: 应 用 滤 镜 制作 图 像 。 


21.8 高 手 甜 点 


甜点 1: 如 何在 户外 拍摄 人 物 


在 户外 拍摄 人 物 时 ， 一 般 不 要 到 阳光 直射 的 地 方 ， 特 别 是 在 光线 很 强 的 夏天 。 但 是 ， 如 
果 由 于 条 件 所 限 必 须 在 这 样 的 情况 下 拍摄 时 ， 则 需要 要 让 被 摄 人 物 背 对 阳光 ， 这 就 是 人 们 常 
说 的 “肩膀 上 的 太阳 ”规则 。 这 样 被 摄 人 物 的 肩膀 和 头发 上 就 会 留 下 不 错 的 边缘 光 效果 (轮廓 
光 )。 然 后 再 用 闪光 灯 略 微 ( 较 低 亮度 ) 给 被 摄 人 物 的 面部 足够 的 光线 ， 就 可 以 得 到 一 张 与 周围 
自然 光 融 为 一 体 的 完美 照片 了 。 


甜点 2: 室内 人 物 拍摄 应 注意 哪些 问题 


人 们 看 照片 时 ， 首 先是 被 照片 中 最 明亮 的 景物 所 吸引 ， 所 以 要 把 最 亮 的 光 投射 到 你 希望 
的 位 置 。 室 内 人 物 摄影 ， 毫 无 疑问 被 摄 体 人 物 的 脸 是 最 引 人 注 目的 ， 那 么 最 明亮 的 光线 应 该 
在 脸 上 ， 然 后 逐渐 沿 着 身体 往 下 而 变 暗 ， 这 样 可 以 增加 趣味 性 、 生 动 性 和 立体 感 。 
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22.1 制作 时 尚 空间 感 的 文字 Logo 


一 个 设计 新 颖 的 网 站 Logo 可 以 给 网 站 带 来 不 错 的 宣传 效应 。 本 节 就 来 制作 一 个 时 尚 空间 
感 的 文字 Logo。 


22.1.1 案例 1 一 一 制作 背景 


制作 文字 Logo 之 前 ， 需 要 事先 制作 一 个 文件 背景 ， 具 体操 作 步 骤 如 下 。 

EC 打开 Photoshop CS6， 选 择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建 】 对 话 
框 ， 在 【名 称 】 文 本 框 中 输入 “文字 Logo”， 将 【宽度 】 设 置 为 400 像素 ，【 高 
度 】 设 置 为 300 像素 ，【 分 辩 率 】 设 置 为 72 像素 /英寸 ， 如 图 22-1 所 示 。 

区 TY 单 击 【 确 定 】 按 钮 ， 新 建 一 个 空白 文档 ， 如 图 22-2 所 示 。 


Wa Ea 
各 WN): 文字 Logo CC 夺 
机 (P 自 定 ~ [7 | 
殉 度 (W): 400 [3 A 
[ER 
4 率 IR); 元 像素 区 十。 一 
医生 模式 (M): RGB 关 多 。。 9 位 
说 及 由 容 (C): 白色 站 
本 本 351 .6 
22-1 【新 建 】 对 话 框 22-2 ”空白 文档 


EEBp 新 建 一 个 【图 层 1】， 设 置 前 景色 为 “C: 59、M: 53、Y: 52、K: 22”， 背 景 
色 为 “C: 0、M: 0、Y: 0、K: 0”， 如 图 22-3 所 示 。 

EEC 选择 工具 箱 中 的 【渐变 工具 】， 在 其 属性 栏 中 设置 过 渡 色 为 【前 景色 到 背景 色 
渐变 】， 渐 变 模式 为 【线性 渐变 】， 如 图 22-4 所 示 。 

ECEJDy 按 Ctal+A 组 合 键 进行 全 选 ， 选 择 【 图 层 1】， 再 回 到 图 像 窗口 ， 在 选区 中 按 住 
Shift 键 ， 同 时 由 上 至 下 画 出 渐变 色 ， 然 后 按 Ctl+D 组 合 键 取消 选区 ， 如 图 22-5 
所 示 。 


图 22-3 设置 颜色 图 22-4 选择 渐变 模式 图 22-5 画 出 渐变 色 


售 484 


站 


22.1.2 ”案例 2 一 一 制作 文字 内 容 


文字 Logo 的 背景 制作 完成 后 ， 下 面 就 可 以 制作 Logo 的 文字 内 容 了 ， 有 具体 操作 步骤 如 下 。 

ED 在 工具 箱 中 选择 【 横 排 文字 工具 】， 在 文档 中 输入 文字 YOU， 并 设置 文字 的 字 
体格 式 为 Times New Roman， 大 小 为 100 点 ， 字 体 样式 为 Bold， 颜 色 为 “C : 0、 
M :100、Y :0、K :0”， 如 图 22-6 所 示 。 

EEJPp 在 【图 层 】 面 板 中 选中 文字 图 层 ， 然 后 将 其 拖 电 到 【新 建 图 层 】 按 钮 上 ， 复 制 
文字 图 层 ， 如 图 22-7 所 示 。 


Jeuueg JT 0601 民 习 六 起 一 一 证 部 否 吕 习性 Zz 游 目 


多 GG 


图 22-6 输入 文字 图 22-7 复制 文字 图 层 


ES 选中 【YOU 副本 】 图 层 ， 选 择 【 编 辑 】 一 【变换 】 一 【垂直 翻转 】 菜 单 命令 ， 
翻转 图 层 ， 然 后 调整 图 层 的 位 置 ， 如 图 22-8 所 示 。 

EEC 选中 【YOU 副本】 图 层 ， 在 图 层面 板 中 设置 该 图 层 的 不 透明 度 为 50%， 最 终 的 

效果 如 图 22-9 所 示 。 


You 副本 . RGB/) 


图 22-8 翻转 图 层 图 22-9 设置 图 层 的 不 透明 度 


ED 参照 step01 一 step04 的 操作 步 又， 设置 字母 本 的 显示 效果 ， 其 颜色 为 白色 ， 如 
图 22-10 所 示 。 
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EEC) 参照 step01 一 step04 的 操作 步骤 ， 设 置 字母 IA 的 显示 效果 ， 其 颜色 为 白色 ， 如 
图 22-11 所 示 。 


22-10 设置 字母 的 效果 22-11 设置 字母 IA 的 效果 
22.1.3 ”案例 3 一 一 绘制 自 定义 形状 


在 一 些 Logo 当中 ， 会 出 现 “@@ ”标识 。 绘 制 “@,” 标识 的 具体 操作 步骤 如 下 。 

EC 在 工具 箱 中 选择 【 自 定形 状 工具 】， 再 在 属性 栏 中 单 击 【形状 】 下 拉 按钮 ， 
打开 系统 预 设 的 形状 ， 在 其 中 选择 需要 的 形状 样式 ， 如 图 22-12 所 示 。 

区 TY 在 【图 层 】 面 板 中 单 击 【新 建 图 层 】 按 钮 ， 新 建 一 个 图 层 ， 然 后 在 该 图 层 中 绘 
制 形状 ， 如 图 22-13 所 示 。 
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hh dd 
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图 22-12 ”选择 形状 图 22-13 绘制 形状 


EE 了 9 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【 栅 
格 化 图 层 】 命 令 ， 即 可 将 该 形状 转化 为 普通 图 层 ， 如 图 22-14 所 示 。 

EEC 选中 形状 所 在 图 层 并 复制 该 图 层 ， 然 后 选择 【编辑 】 一 【变换 】 一 【垂直 翻 
转 】 菜 单 命令 ， 翻 转 形状 ， 最 后 调整 该 形状 图 层 的 位 置 与 图 层 不 透明 度 ， 如 图 22-15 
所 示 。 
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图 22-14 栅 格 化 形状 图 22-15 翻转 图 层 


22.1.4 ”案例 4 一 一 美化 文字 Logo 


美化 文字 Logo 的 具体 操作 步骤 如 下 。 

EC 新 建 一 个 图 层 ， 然 后 选择 工具 箱 中 的 【单列 选 框 工 具 】， 选 择 图 层 中 的 单列 ， 
如 图 22-16 所 示 。 

ECRD9 选择 工具 箱 中 的 【油漆 桶 】 工 具 ， 填 充 单列 为 梅 红色 “C : 0、M : 100、YY : 0、 

KK : 0”， 然 后 按 CtrltD 组 合 键 ， 取 消 选 区 的 选择 状态 ， 如 图 22-17 所 示 。 


图 22-16 选择 单列 图 22-17 填充 单列 选区 
EEC 按 Cul+T 组 合 键 ， 自 由 变换 绘制 的 直线 ， 并 将 其 调整 到 合适 的 位 置 ， 如 图 22-18 
所 示 。 


EEC 选择 工具 箱 中 的 【橡皮 擦 】 工 具 ， 擦 除 多 余 的 直线 ， 如 图 22-19 所 示 。 


22-18 ”变换 绘制 的 直线 22-19” 擦 除 多 余 的 直线 


EEID 复制 直线 所 在 图 层 ， 然 后 选择 【编辑 】 一 【变换 】 一 【垂直 翻转 】 菜 单 命 令 ， 
并 调整 其 位 置 和 图 层 的 不 透明 度 ， 如 图 22-20 所 示 。 
EEJDp 新 建 一 个 图 层 ， 选 择 工具 箱 中 的 【 秆 形 选 框 工具 】， 在 其 中 绘制 一 个 矩形 ， 并 
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填充 矩形 的 颜色 为 “C : 0、M : 100、Y : 0、K : 0”， 如 图 22-21 所 示 。 


图 22-20 ”翻转 直线 图 22-21 ”绘制 矩形 
ET 在 梅 红色 矩形 上 输入 文字 “ 友 佳 ”， 并 调整 文字 的 大 小 与 格式 ， 如 图 22-22 
所 示 。 


四 于 BY 双击 文字 “ 友 佳 ”所 在 的 图 层 ， 打 开 【 图 层 样 式 】 对 话 框 ， 勾 选 【 投 影 】 复 选 
框 ， 为 图 层 添 加 投影 样式 ， 如 图 22-23 所 示 。 


图 22-22 输入 文字 图 22-23 为 文字 添加 投影 效果 


EEJp 选中 矩形 与 文字 “ 友 佳 ” 所 在 图 层 ， 然 后 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【 合 
并 图 层 】 命 令 ， 合 并 选中 的 图 层 ， 如 图 22-24 所 示 。 

EEC 选中 合并 之 后 的 图 层 ， 将 其 拖 扰 到 【新 建 图 层 】 按 钮 之 上 ， 复 制图 层 。 然 后 选 
择 【 编 辑 】 一 【变换 】 一 【垂直 翻转 】 菜 单 命令 ， 翻 转 图 层 ， 最 后 调整 图 层 的 位 置 
与 图 层 的 不 透明 度 ， 最 终 效果 如 图 22-25 所 示 。 


图 22-24 合并 图 层 图 22-25 最 终 效果 
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22.2 ”制作 网 页 图 案 Logo 
本 节 介绍 如 何 制作 图 案 Logo。 
22.2.1 案例 5 一 一 制作 背景 


制作 背景 的 具体 操作 步骤 如 下 。 

EC 打开 Photoshop CS6， 选 择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建 】 对 话 
框 ， 在 【名 称 】 文 本 框 中 输入 “图 案 Logo”， 将 【宽度 】 设 置 为 400 像素 ，【 高 
度 】 设 置 为 300 像素 ，【 分 辩 率 】 设 置 为 72 像素 /英寸 ， 如 图 22-26 所 示 。 

EDp 单 击 工 具 箱 中 的 【渐变 工具 】 按 钮 ， 再 双击 属性 栏 中 的 【编辑 渐变 】 按 钮 ， 即 
可 打开 【渐变 编辑 器 】 对 话 框 ， 在 其 中 设置 最 左边 色 标的 RGB 值 为 “47、176、 
224”， 最 右边 色 标的 RGB 值 为 “255、255、255”， 如 图 22-27 所 示 。 
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22-26 新建 空白 文档 22-27 【渐变 编辑 器 】 对 话 框 


ECDIS 设置 完毕 后 单 击 【确定 】 按 钮 ， 对 选区 从 上 到 下 进行 渐变 填充 ， 如 图 22-28 所 示 。 

EEC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建 】 对 话 框 ， 在 其 中 设置 【 帘 
度 】 为 400 像素 ， 【高度 】 为 10 像素 ，【 分 辨 率 】 为 72 像素 /英寸 , 【颜色 模式 】 
为 【RGB 颜色 】，【 背 景 内 容 】 为 【透明 】， 如 图 22-29 所 示 。 
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图 22-28 ”渐变 填充 选区 图 22-29 【新 建 】 对 话 框 
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EECID 在 【图 层 】 面 板 中 单 击 【 新 建 图 层 】 按 钮 ， 新 建 一 个 图 层 之 后 ， 单 击 工具 箱 中 
的 【和 矩形 选 框 工具 】 按 钮 ， 并 在 属性 栏 中 设置 【样式 】 为 【固定 大 小 】，【 宽度】 
为 400 像素 ，【 高 度 】 为 5 像素 ， 在 视图 中 绘制 一 个 矩形 ， 如 图 22-30 所 示 。 

ECG 单 击 工具 箱 中 的 【前 景色 】 图 标 ， 在 弹出 的 【 拾 色 器 】 对 话 框 中 ， 将 RGB 值 设 
为 “148、148、155”， 然 后 使 用 【油漆 桶 工具 】， 为 选区 填充 颜色 ， 如 图 22-31 所 示 。 


SB/B)* = ox 


图 22-30 ”绘制 矩形 选区 图 22-31 填充 矩形 选区 
EC 选择 【编辑 】 一 【定义 图 案 】 菜 单 命 令 ， 打开 【 图 案 名 称 】 对 话 框 ， 在 【名 
称 】 文 本 框 中 输入 图 案 的 名 称 即 可 ， 如 图 22-32 所 示 。 
葬 于 BY 返回 到 图 案 Logo 视图 中 ， 选 中 已 被 渐变 填充 的 矩形 选区 ， 在 【图 层 】 面 板 中 单 
击 【新 建 图 层 】 按 钮 ， 新 建 一 个 图 层 之 后 ， 选 择 【 编 辑 】 一 【填充 】 菜 单 命令 ， 即 
可 打开 【填充 】 文 本 框 ， 设 置 【 使 用 】 为 【图 案 】，【 自 定 图 案 】 为 上 面 定义 的 图 
案 ，【 模 式 】 为 【正常 】， 如 图 22-33 所 示 。 


混合 
模式 (M): 正常 
不 透明 度 (0): ED 四 
El 保留 通明 区 域 (P) 


己 本 一 脚本 模式 
| 名 称 N): 二 汉 三 二 二 


图 22-32 【图 案 名 称 】 对 话 框 图 22-33 【填充 】 对 话 框 


EEJop 设置 完毕 后 单 击 【 确 定 】 按 钮 即 可 为 选 定 的 区 域 填充 图 像 ， 然 后 在 【图 层 】 面 
板 中 可 以 通过 调整 其 不 透明 度 来 设置 填充 图 像 的 显示 效果 ， 在 这 里 设置 图 层 不 透明 
度 为 47%， 如 图 22-34 所 示 。 

EC 在 【图 层 】 面 板 中 双击 新 建 的 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 在 【样式 】 中 
选择 【内 发 光 】 样 式 之 后 ， 设 置 【混合 模式 】 为 【正常 】， 发 光 颜色 RGB 值 为 
“255、255、190”，【 大 小 】 为 5 像素 。 设 置 完毕 之 后 ， 单 击 【 确 定 】 按 钮 ， 即 可 
完成 对 内 发 光 样 式 的 设置 ， 如 图 22-35 所 示 。 
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22.2.2 ”案例 6 一 一 制作 图 案 效 果 


[es 


图 22-34 设置 图 层 的 不 透明 度 图 22-35 设置 图 层 样式 


背景 制作 完毕 后 ， 下 面 就 可 以 制作 图 案 效 果 了 ， 有 具体 操作 步骤 如 下 。 

EEIDp 在 【图 层 】 面 板 中 单 击 【 新 建 图 层 】 按 钮 ， 新 建 一 个 图 层 之 后 ， 单 击 工具 箱 中 
的 【椭圆 选 框 工具 】 按 钮 ， 按 住 Shift 键 在 图 层 中 创建 一 个 圆 形 选区 ， 如 图 22-36 所 示 。 

EEJDy 使 用 【油漆 桶 工具 】， 为 选区 填充 颜色 ， 其 RGB 值 设 为 “120、156、115”， 

如 图 22-37 所 示 。 
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图 22-36 创建 圆 形 选区 图 22-37 ”填充 颜色 


ECDIS 在 【图 层 】 面 板 中 双击 新 建 的 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 在 【样式 】 中 
选择 【外 发 光 】 样 式 之 后 ， 设 置 【混合 模式 】 为 【正常 】， 发 光 颜 色 RGB 值 为 
“240、243、144”，【 大 小 】 为 24 像素 ， 如 图 22-38 所 示 。 

EEC 设置 完毕 后 单 击 【 确 定 】 按 钮 ， 即 可 完成 对 外 发 光 样式 的 设置 ， 如 图 22-39 所 示 。 


医 二 本 


22-38 【图 层 样式 】 对 话 框 22-39 ”设置 图 层 外 发 光 效果 
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网 页 设计 与 网 站 建设 
案例 课堂 >… 


EEIDy 在 【图 层 】 面 板 中 单 击 【新 建 图 层 】 按 钮 ， 新 建 一 个 图 层 之 后 ， 单 击 工具 箱 中 
的 【椭圆 选 框 工具 】 按 钮 ， 按 住 Shift 键 在 上 面 创建 的 圆 形 中 再 创建 一 个 圆 形 选区 ， 


如 图 22-40 所 示 。 
EEJup 使 用 【油漆 桶 工具 】， 为 选区 填充 颜色 ， 其 RGB 值 设 为 “255、255、 
255”， 如 图 22-41 所 示 。 


图 22-40 创建 圆 形 选区 图 22-41 填充 颜色 


EEJ 在 【图 层 】 面 板 中 单 击 【 新 建 图 层 】 按 钮 ， 新 建 一 个 图 层 ， 然 后 单 击 工具 箱 中 
的 【 自 定形 状 工具 】 按 钮 ， 在 属性 栏 中 ， 单 击 【 形 状 】 下 拉 按 钮 ， 在 弹出 的 下 拉 列 
表 中 选择 红 桃 形状 争 ， 如 图 22-42 所 示 。 

ED 选择 完毕 后 在 视图 中 绘制 一 个 心 形 图 案 ， 在 【路 径 】 面 板 中 单 击 【将 路 径 作为 
选区 载 入 】 按 钮 ， 即 可 将 红 桃 形 图 案 的 路 径 转 化 为 选区 ， 如 图 22-43 所 示 。 


4 1 快速 莹 版 /8 * = x 


轿 安 Logo.psd 


图 22-42 ”选择 形状 图 22-43 绘制 心 形 


国 于 BY 单 击 【 前 景色 】 图 标 ， 打 开 【 拾 取 实 色 】 对 话 框 ， 在 其 中 将 RGB 值 设 为 
“224、65、65”， 然 后 使 用 【油漆 桶 工具 】 为 选区 填充 颜色 ， 再 使 用 【移动 工具 】 
调整 其 位 置 ， 完 成 后 具体 的 显示 效果 如 图 22-44 所 示 。 

EEC 在 【图 层 】 面 板 中 单 击 【新建 图 层 】 按 钮 ， 新 建 一 个 图 层 ， 单 击 工具 箱 中 的 
【 横 排 文字 工具 】 按 钮 ， 在 视图 中 输入 文本 Love 之 后 ， 再 在 “字符 ”面板 中 设置 字 
体 大 小 为 20 点 ， 字 体 样式 为 宋体 ， 颜 色 为 白色 ， 如 图 22-45 所 示 。 
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图 22-44 ”填充 心 形 图 22-45 输入 文字 


22.3 制作 网 页 图 文 结 合 Logo 
大 部 分 网 站 的 Logo 都 是 图 文 结合 的 Logo， 本 节 就 来 制作 一 个 图 文 结合 的 Logo。 
22.3.1 案例 7 一 一 制作 网 站 Logo 中 的 图 案 


制作 网 站 Logo 中 的 图 案 的 具体 操作 步骤 如 下 。 

EEC 在 Photoshop CS6 的 主 窗口 中 ， 选 择 【 文 件 】 一 【新 建 】 菜 单 命 令 ， 打 开 【 新 
建 】 对 话 框 ， 在 其 中 设置 【宽度 】 为 200 像素 ，【 高 度 】 为 100 像素 ，【 分 辨 率 】 
为 96.012 像素 /英寸 ， 【颜色 模式 】 为 【RGB 颜色 】，【 背 景 内 容 】 为 【白色 】， 
如 图 22-46 所 示 。 

EC 选择 【视图 】 一 【显示 】 一 【网 格 】 菜 单 命令 ， 在 图 像 窗口 中 显示 出 网 格 ， 然 
后 选择 【编辑 】 一 【首选 项 】 一 【参考 线 、 网 格 和 切片 】 菜 单 命令 ， 打 开 【 首 选 
项 】 对 话 框 ， 在 其 中 将 【网 格 线 间 隔 】 设 置 为 10 毫米 ， 如 图 22-47 所 示 。 
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If 
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图 22-46 【新 建 】 对 话 框 22-47 【首选 项 】 对 话 框 


EEJe 设置 完毕 后 单 击 【 确 定 】 按 钮 ， 此 时 图 像 窗 口 显示 的 网 格 属性 如 图 22-48 所 示 。 
EC 在 【图 民 】 面 板 中 单 击 【新 建 图 层 】 按 钮 ， 新 建 一 个 图 层 之 后 ， 单 击 工具 箱 中 的 
【椭圆 选 框 工具 】 按 钮 ， 按 住 Shift 键 在 图 层 中 创建 一 个 圆 形 选区 ， 如 图 22-49 所 示 。 
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网 页 设计 与 网 站 建设 
案例 课堂 9 一 


图 22-48 ”显示 网 格 属性 图 22-49 绘制 圆 形 
葬 于 BY 选择 工具 箱 中 的 【多 边 形 套 索 工具 】， 并 同时 按 住 Alt 键 减少 部 分 的 选区 ， 完 成 
后 的 效果 如 图 22-50 所 示 。 
ED 设置 前 景色 的 颜色 为 绿色 ， 其 RGB 值 为 “27、124、30”， 然 后 选择 【油漆 桶 
工具 】， 使 用 前 景色 进行 填充 ， 如 图 22-51 所 示 。 


图 22-50 减少 选区 图 22-51 填充 选区 
EEC 在 【图 层 】 面 板 中 单 击 【 新 建 图 层 】 按 钮 ， 新 建 一 个 图 层 之 后 ， 单 击 工具 箱 中 
的 【椭圆 选 框 工具 】 按 钮 ， 按 住 Shift 键 在 图 层 中 创建 一 个 圆 形 选区 ， 如 图 22-52 
所 示 。 
了 TB 设置 前 景色 的 颜色 为 红色 ， 其 RGB 值 为 “255、0、0”， 然 后 选择 填充 工具 ， 
使 用 前 景色 进行 填充 ， 如 图 22-53 所 示 。 


[下] 图 文 结合 Logo @ 200% 回 层 1 RGB/) * 图 文革 合 Logo @ 200% ( 固 层 1 RGB/8)* 


图 22-52 ”创建 圆 形 选 区 图 22-53 ”填充 选区 


EEJp 采用 同样 的 办 法 依次 创建 两 个 新 的 图 层 ， 并 在 
每 个 图 层 上 创建 一 个 大 小 不 同 的 红色 选区 。 使 用 
【移动 工具 】 调 整 其 位 置 ， 完 成 后 的 效果 如 图 22-54 


所 示 。 
22.3.2 案例 8 一 制作 网 站 Logo 中 的 文字 Bopp 
图 案 制作 完毕 后 ， 下 面 就 可 以 制作 网 站 Logo 中 的 文字 图 22-54 图像 效 果 


了 ， 具 体操 作 步 骤 如 下 。 
本 了 TY 新 建 一 个 图 层 ， 然 后 单 击 工具 箱 中 的 【 横 排 文字 工具 】 按 钮 ， 单 击 属性 栏 中 的 
【文字 变形 】 按 钮 ， 打 开 【 变 形 文 字 】 对 话 框 。 在 【样式 】 下 拉 列 表 框 中 选择 【 波 
浪 】 选 项 ， 设 置 完 毕 后 单 击 【确定 】 按 钮 ， 如 图 22-55 所 示 。 
ECEJPp 选择 【窗口 】 一 【段落 】 菜 单 命令 ， 打 开 【 段 落 】 面 板 ， 然 后 切换 到 【字符 】 
面板 ， 在 【字符 】 面 板 中 设置 要 输入 文字 的 各 个 属性 ， 如 图 22-56 所 示 。 


有 Ee 
样式 (S) ~ ad 
回 水 平 (H) 要 直 (\) Ca 
亚 申 (8): +50 % 
水 下 所 蝗 (0) 和 
重 直 所得 (E) 0 % 
22-55 【变形 文字 】 对 话 框 22-56 【字符 】 面 板 
EEJep 设置 完毕 后 在 图 像 中 输入 文字 “创新 科技 ”， 并 适当 调整 其 位 置 ， 如 图 22-57 
所 示 。 


EEC 在 【图 层 】 面 板 中 双击 文字 图 层 的 图 标 ， 打 开 【 图 层 样式 】 对 话 框 ， 并 在 【 样 
式 】 中 选择 【和 斜面 和 浮雕 】 选 项 ， 设 置 【 样 式 】 为 【外 斜面 】， 并 设置 【阴影 模 
式 】 颜 色 的 RGB 值 为 “253、109、159”， 如 图 22-58 所 示 。 


EEEE Ea 
ee 三 王 
je AN) 
: 加 
图 22-57 输入 文字 图 22-58 【图 层 样式 】 对 话 框 
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EECRD 设置 完毕 单 击 【确定 】 按 钮 ， 其 效果 如 图 22-59 所 示 。 
EED 新 建 一 个 图 层 ， 然 后 单 击 工具 箱 中 的 【 横 排 文字 工具 】 按 钮 ， 并 在 属性 栏 中 设 
置 文字 的 大 小 、 字 体 和 颜色 ， 然 后 输入 文字 Cx， 如 图 22-60 所 示 。 


图 22-59 文字 效果 图 22-60 输入 文字 


四 于 右 击 新 建 的 文字 图 层 ， 在 弹出 的 快捷 菜单 中 选择 【 栅 格 化 文字 】 命 令 ， 将 文字 
图 层 转化 为 普通 图 层 ， 然 后 按 Ctrl+T 组 合 键 对 文字 进行 变形 和 旋转 ， 完 成 后 的 效果 
如 图 22-61 所 示 。 

ea 分 的 制作 ， 其 最 终 效果 如 图 22-62 所 示 。 


图 22-61 栅 格 化 文字 图 22-62 输入 其 他 文字 


EEJpp 选择 【视图 】 一 【显示 】 一 【网 格 】 菜 单 命令 ， 在 图 像 窗 口中 取消 网 格 的 显 
示 。 至 此 ， 人 的 制作 ， 如 图 22-63 所 示 。 
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22-63 ”取消 网 格 的 显示 
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22.4 制作 网 页 英文 Banner 


在 网 站 当中 ，Banner 的 位 置 显著 ,色彩 艳丽 ， 动 态 的 情况 较 多 ， 很 容易 吸引 浏览 者 的 目 
光 ， 所 以 Banner 作为 一 种 页 面 元 素 ， 它 必须 服从 整体 页 面 的 风格 和 设计 原则 。 本 节 就 来 制作 
一 个 英文 Banner。 


22.4.1 案例 9 一 一 制作 Banner 背景 


制作 Banner 背景 的 具体 操作 步骤 如 下 。 

EDp 打开 Photoshop， 按 CtrltN 组 合 键 ， 新 建 一 个 宽 468 像素 、 高 60 像素 的 文件 ， 
将 它 命 名 为 “英文 Banner”， 如 图 22-64 所 示 。 

单 击 【确定 】 按 钮 ， 新 建 一 个 空白 文档 ， 如 图 22-65 所 示 。 


WE | 
名 称 (N): 英文 banner 下 达 一 J 
预 设 (P): 自 定 by 取消 
存 钱 祝 设 (5)..。 | 
宽度 (W): 468 像素 bd MR 
高 度 (H): 60 像素 
分 状 诗 (R): 72 像素 项 寸 ~ 
预 色 模 式 (M); RGB 颜色 ~ 8 位 
情景 内 容 (0): 白色 j 
可 高 级 82.3 


图 22-64 【新 建 】 对 话 框 图 22-65 ”空白 文档 


葬 于 BY 新 建 【 图 层 1】， 设 置 前 景色 为 “C: 5、M: 20、Y: 95、K: 0”， 背 景色 为 
“C: 36、M: 66、Y: 100、K: 20”， 如 图 22-66 所 示 。 

ECERZ 选择 工具 箱 中 的 【渐变 工具 】， 在 其 属性 栏 中 设置 过 渡 色 为 【前 景色 到 背景 色 
渐变 】， 渐 变 模式 为 【线性 渐变 】， 如 图 22-67 所 示 。 

四 于 BY 接 Ctrl+A 组 合 键 进行 全 选 ， 选 择 【 图 层 1】， 再 回 到 图 像 窗口 ， 在 选区 中 按 
住 Shift 键 ， 同 时 由 上 至 下 画 出 渐变 色 ， 然 后 按 CtrltD 组 合 键 取消 选区 ， 如 图 22-68 


所 示 。 
国 - 
22-66 设置 背景 颜色 图 22-67 选择 渐变 样式 22-68 ”渐变 填充 选区 
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22.4.2 ”案例 10 一 一 制作 Banner 底 纹 


制作 Banner 背景 底 纹 的 具体 操作 步骤 如 下 。 

EEJDp 在 工具 箱 中 选择 【画笔 工具 】， 单 击 【 形 状 】 下 拉 按 钮 ， 在 弹出 的 下 拉 列 表 中 
选择 5 图案 ， 并 设置 大 小 为 100 像素 ， 流 量 为 50%， 如 图 22-69 所 示 。 

EDy 使 用 【画笔 工具 】 在 图 片 中 画 出 如 图 22-70 所 示 的 图 形 。 


100 


图 22-69 设置 画笔 参数 图 22-70 ”绘制 图 形 

区 对 E> 选择 【 自 定形 状 工具 】， 在 属性 栏 中 选择 自己 喜欢 的 形状 ， 这 里 选择 组 形状 ， 
如 图 22-71 所 示 。 

EEC 新 建 【路 径 1】， 绘 制 大 小 合适 的 形状 ， 再 右 击 【路径 1】， 在 弹出 的 快捷 菜单 
中 选择 【建立 选区 】 命 令 ， 如 图 22-72 所 示 。 


图 22-71 选择 形状 图 22-72 建立 选区 


ED 设置 前 景色 为 “C: 10、M: 16、Y: 75、K: 0”， 新 建 【图 层 2】， 然 后 填充 
形状 ， 如 图 22-73 所 示 。 


图 22-73 ”填充 形状 


$ 498 


第 

EEJe 双击 【图 层 2】， 打 开 【 图 层 样式 】 对 话 框 ， 为 【图 层 2】 添 加 投影 和 描 边 图 层 ”总 
样式 ， 具 体 的 参数 设置 如 图 22-74 所 示 。 章 

于 网 

如 

= [7 | 标 

| BRR(W).. [ (WwW).,. ] 起 

Da) DW) | 

国 国 制 

作 

网 

| 站 

- | 5 
a Claws) CE 党 
| 三 
名 

= 


22-74 【图 层 样 式 】 对 话 框 


EC 选择 【 自 定形 状 工具 】， 为 图 片 添 加 形状 ， 并 填充 为 绿色 ， 具 体 的 效果 如 图 22-75 
所 示 。 


A 


22-75 填充 图 形 


22.4.3 ”案例 11 一 一 制作 文字 特效 


制作 文字 特效 的 具体 操作 步骤 如 下 。 

ETDp 选择 工具 箱 中 的 【 横 排 文字 工具 】， 为 Banner 添加 英文 文字 ， 然 后 设置 文字 的 
大 小 、 颜 色 、 字 体 等 属性 ， 并 为 文字 图 层 添加 投影 效果 ， 如 图 22-76 所 示 。 

ECEIDy 选择 【编辑 】 一 【变换 】 一 【 斜 切 】 菜 单 命令 ， 调 整 文字 的 角度 ， 最 终 效 果 如 

图 22-77 所 示 。 


El to become a musitian 


x 
3 to become a musieian 


wn | 天 


图 22-76 输入 文字 图 22-77 ”调整 文字 角度 


22.5 制作 网 页 中 文 Banner 


上 一 节 介 绍 了 如 何 制 作 英文 Banner， 这 一 节 将 来 介绍 如 何 制作 中 文 Banner。 
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22.5.1 案例 12 一 一 输入 特效 文字 


输入 特效 文字 的 具体 操作 步骤 如 下 。 

EEIDp 打开 Photoshop CS6， 选 择 【 文 件 】 一 【新 建 】 菜 单 命令 ， 弹 出 【新 建 】 对 话 
框 ， 输 入 相关 配置 ， 创 建 一 个 600 像素 x300 像素 的 空白 文档 ， 单 击 【 确 定 】 按 
钮 ， 如 图 22-78 所 示 。 

EDRDp 使 用 工具 箱 中 的 【 横 排 文字 工具 】 在 文档 中 插入 要 制作 立体 效果 的 文字 内 容 ， 
文字 颜色 和 字体 可 自行 定义 ， 本 实例 采用 黑色 ， 如 图 22-79 所 示 。 


[= 
名 称 (上 0: 未 标题 -1 一 
预 设 (P): 自 定 有 
TS 
宽度 (W): 600 贸 素 - EF 
高 度 H): 30 。 | 多 素 
分 状 率 (R); 96.012 像素 / 英 二 “~ 
颜色 模式 (N):。 R68 丽 色 ”~ 8 位 - 贝 贝 0) 时 尚 创意 
稍 录 内 容 (0): 白色 可 像 大 小 
局 高 级 527.3K 
22-78 【新 建 】 对 话 框 22-79 输入 文字 


于 BY 右 击 文字 图 层 ， 在 弹出 的 快捷 菜单 中 选择 【 栅 格 化 文字 】 命 令 ， 将 矢量 文字 变 
成 像素 图 像 ， 如 图 22-80 所 示 。 

EC 选择 【编辑 】 一 【自由 变换 】 菜 单 命令 ， 对 文字 执行 变形 操作 ， 调 整 到 合适 的 
角度 ， 如 图 22-81 所 示 。 


转换 为 智能 对 象 


ER 
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转换 为 形状 
水 平 
要 直 
无 
锐利 
层 利 
社 厚 
平 油 


图 22-80 栅 格 化 文字 图 22-81 ”变换 文字 


ra 对 文字 进行 自由 变换 时 需要 注意 透视 原理 。 


大 


| 
| 
第 
22.5.2 ”案例 13 一 一 将 输入 的 文字 设置 为 3D 效果 章 
网 
将 输入 的 文字 设置 为 3D 效果 的 具体 操作 步骤 如 下 。 下 
EID 复制 文字 图 层 ， 生 成 文字 副本 图 层 ， 如 图 22-82 所 示 。 视 
EDUD 选择 副 木 图 层 并 双击 ， 弹 出 【图 层 样式 】 对 话 框 ， 勾 选 【斜面 和 浮雕 】 复 选 1 
框 ， 调 整 【深度 】 为 350%，【 大 小 】 为 2 像素 ， 义 选 【颜色 关 加 】 复 选 杠 ， 设 置 盔 。 
加 颜色 为 红色 ， 单 击 【 确 定 】 按 钮 ， 如 图 22-83 所 示 。 信 
i 网 
3 Si [rm] 后 
污 全 去 醒 ， 对 Pr EE 号 
二 一 一 -| Ca 每 
Ei | 同 HCV) 
二 一 NN 
Ca) Cacsrwa 
图 22-82 ”复制 图 层 图 22-83 【图 层 样 式 】 对 话 框 


ED) 新 建 【 图 层 1】， 把 【图 层 1】 拖 到 文字 副本 图 层 下 方 ， 如 图 22-84 所 示 。 
ED 右 击 文字 副本 图 层 ， 在 弹出 的 快捷 菜单 中 选择 【向 下 合并 】 命 令 ， 将 文字 副本 
图 层 合并 到 【图 层 1】 上 得 到 新 的 图 层 ， 如 图 22-85 所 示 。 


22-84 ”调整 图 层 位 置 图 22-85 合并 图 层 
EEID 选择 【图 层 1】， 按 Ctrl+Alt+T 组 合 键 执行 复制 变形 ， 在 属性 栏 中 输入 纵横 拉 伸 
的 百分比 均 为 101% 左 右 ， 然 后 使 用 小 键盘 中 的 方向 键 ， 向 右 移 动 两 个 像素 ( 单 击 一 
次 方向 键 可 移动 一 个 像素 )， 如 图 22-86 所 示 。 
ED 按 Cal+AlttShifttT 组 合 键 复制 【图 层 1】， 并 使 用 方向 键 向 右 移 动 一 个 像素 ， 
使 用 相同 方法 依次 复制 图 层 ， 并 向 右 移动 一 个 像素 ， 经 过 多 次 重复 操作 ， 得 到 如 图 22-87 
所 示 的 立体 效果 。 
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图 22-87 复制 多 个 文字 图 层 


图 22-86 ”变形 文字 
合并 除了 背景 层 和 原始 文字 图 层 外 的 其 他 所 有 图 层 ， 并 将 合并 后 的 图 层 拖 放 到 
文字 图 层 下 方 ， 如 图 22-88 所 示 。 


[| 过 吧 


可 6- 血本 让 


图 22-88 合并 图 层 
ETBY 选择 文字 图 层 ， 按 Ctrlt+T 组 合 键 对 图 形 执行 拉 伸 变形 操作 ， 使 其 刚好 能 盖 住 制 
作 立 体 效 果 的 表面 ， 按 Enter 键 使 其 生效 ， 如 图 22-89 所 示 。 


EEC 双击 文字 图 民 ， 弹 出 【图 层 样式 】 对 话 框 ， 勾 选 【 渐 变 伏 加 】 复 选 枉 ， 设 置 渐 
二 【确定 】 按 钮 ， 如 图 22-90 所 示 。 


变样 式 为 “ 橙 、 黄 、 橙 渐变 ”， 单 
En 
CR E73 
Ch 
on 


图 22-90 【图 层 样式 】 对 话 框 


图 22-89 ”变形 文字 
本 D> 立体 文字 效果 制作 完成 ， 如 图 22-91 所 示 。 
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图 22-91 文字 效果 科 

站 

22.5.3 ”案例 14 一 一 制作 Banner 背景 8 
与 

制作 Banner 背景 的 具体 操作 步骤 如 下 。 
EEJDp 按 Ctrl+N 组 合 键 ， 打 开 【 新 建 】 对 话 框 ， 新 建 一 个 宽 468 像素 、 高 60 像素 的 ”BB 


文件 ， 将 它 命 名 为 “中 文 Banner”， 如 图 22-92 所 示 。 
本 于 BY 单 击 【 确 定 】 按 钮 ， 新 建 一 个 空白 文档 ， 如 图 22-93 所 示 。 


A 


bid Ea) 
名 称 (N); 中 文 Banner [这 
预 设 (P); 自 定 ~ [Em "EN 
存 结 设 (5). 
克 庚 (W): 465 像素 > 网 入 
高 度 (H): 60| 像素 
分 关 鞋 (R): 96.012 像素 区 二 ~ 
颜色 横 式 (N): RGB 颜色 ~ 8 位 
背景 内 容 (0: 白色 国人 小 
避 高 如 82.3K 
22-92 【新 建 】 对 话 框 图 22-93 空白 文档 


四 BY 选择 工具 箱 中 的 【渐变 工具 】， 并 设置 渐变 颜色 为 紫色 “R: 102、G: 102、 
B: 155” 到 橙色 “R: 230、G: 230、B: 255” 的 渐变 ， 如 图 22-94 所 示 。 

EEC 按 住 Ctrl 键 ， 单 击 背 景 图 层 ， 全 选 背景 ， 然 后 在 选 框 上 方 单 击 并 向 下 拖 忠 鼠 
标 ， 填 充 从 上 到 下 的 渐变 。 然 后 按 CtrltD 组 合 键 取消 选区 ， 如 图 22-95 所 示 。 


图 22-94 选择 渐变 图 案 图 22-95 ”渐变 填充 选区 


本 于 打开 上 一 节制 作 的 特效 文字 ， 使 用 【移动 工具 】 将 该 文字 拖 忠 到 “中 文 Banner” 
文件 中 ， 然 后 按 Cal+T 组 合 键 ， 调 整 文字 的 大 小 与 位 置 ， 如 图 22-96 所 示 。 
EC 选择 【画笔 工具 】， 然 后 在 画笔 预 设 面 板 中 选择 枫叶 图 案 ， 并 设置 图 案 的 大 小 
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等 ， 如 图 22-97 所 示 。 


Dmonmmam 


图 22-96 ”变形 文字 图 22-97 ”设置 画笔 参数 
在 “中 文 Banner” 文 档 中 绘制 枫叶 图 案 ， 最 终 效果 如 图 22-98 所 示 。 


中 文 Banner x 


a DD on 


22-98 中 文 Banner 的 效果 


22.6 ” 跟 我 练 练 手 
22.6.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
22.6.2 上 机 练习 


练习 1: 制作 时 尚 空间 感 的 文字 Logo。 
练习 2: 制作 网 页 图 案 Logo。 

练习 3: 制作 网 页 图 文 结合 Logo。 
练习 4: 制作 网 页 英文 Banner。 

练习 5: 制作 网 页 中 文 Banner。 


22.7 高 手 甜点 


甜点 1: 选区 图 像 的 精确 移动 


选择 选区 后 ， 单 击 工 具 箱 中 的 【移动 工具 】 按 钮 ， 使 用 方向 键 可 以 对 选区 执行 精确 移 
动 ， 每 次 移动 一 个 像素 。 如 果 要 加 快 移动 速度 ， 可 以 在 移动 的 同时 按 住 Shift 键 。 


和 504 


甜点 2: 如 何 重复 利用 设置 好 的 渐变 色 

在 设置 渐变 填充 时 ， 设 置 一 个 比较 满意 的 渐变 色 很 不 容易 ， 设 置 好 的 渐变 色 也 有 可 能 需 
要 在 多 个 对 象 上 使 用 ， 所 以 能 将 设置 好 的 渐变 色 保存 下 来 就 再 好 不 过 了 。 那 么 ， 应 当 如 何 操作 呢 ? 

具体 的 操作 方法 如 下 : 在 【渐变 编辑 器 】 对 话 框 中 ， 设 置 好 渐变 色 后 ， 在 【名 称 】 文 本 
框 中 输入 名 称 ， 单 击 【 新 建 】 按 钮 ， 可 以 将 已 经 设置 好 的 渐变 色 保存 到 预 设 中 ， 如 图 22-99 
所 示 。 对 其 他 对 象 设置 渐变 时 可 以 从 预 设 中 找到 保存 的 渐变 设置 。 


图 22-99 设置 渐变 色 


Jeuueg JJ o6o] 其 习 稚 中 
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导航 条 是 网 页 的 一 个 重要 组 成 部 分 。 导 航 条 的 设计 ， 有 时 会 决定 一 个 页 面 的 成 


败 ， 同 时 导航 条 也 是 提高 站 点 易 用 性 的 关键 。 
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网 页 设计 与 网 站 建设 
案例 课堂 »~ 


23.1 网 页 导航 条 简介 


导航 条 是 最 早出 现在 网 页 上 的 页 面 元 素 之 一 。 它 既是 网 站 路 标 ， 又 是 分 类 名 称 ， 是 十 分 
重要 的 。 导 航 条 应 放置 到 明显 的 页 面 位 置 ， 让 浏览 者 在 第 一 时 间 内 看 到 它 并 做 出 判断 ， 决 定 
要 进入 哪个 栏目 去 搜索 他 们 所 要 的 信息 。 

在 设计 网 站 导航 条 的 时 候 ， 一 般 来 说 要 注意 以 下 几 点 。 

e ”网 站 导航 条 的 色彩 要 与 网 站 的 整体 相 融 合 ， 在 色彩 的 选用 上 不 要 求 具 有 Logo、 


NN Banner 那样 的 鲜明 色彩 。 
。 ”放置 在 网 站 正文 的 上 方 或 者 下 方 ， 这 样 能 够 为 精心 设计 的 导航 条 提供 一 个 很 好 的 展 
示 空间 。 如 果 网 站 使 用 的 是 列表 导航 ， 也 可 以 将 列表 放置 在 网 站 正文 的 两 侧 。 
。 ”导航 条 应 层次 清晰 ， 能 够 简单 明了 地 反映 访问 者 所 浏览 的 层次 结构 。 
。 ”应 更 可 能 多 地 提供 相关 资源 的 链接 。 


23.2 制作 网 页 导航 条 


导航 条 的 设计 根据 具体 情况 可 以 有 多 种 变化 ， 它 的 设计 风格 决定 了 页 面 设计 的 风格 。 常 
见 的 导航 条 有 横向 导航 、 纵 向 导航 等 。 


23.2.1 案例 1 一 一 制作 横向 导航 条 框架 


制作 横向 导航 条 框架 的 具体 操作 步骤 如 下 。 

EC 在 Photoshop CS6 操作 界面 中 ， 选 择 【 文 件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 
建 】 对 话 框 ， 在 其 中 设置 文档 的 【宽度 】、【 高 度 】 等 参数 ， 如 图 23-1 所 示 。 
EEIDp 单 击 【 确 定 】 按 钮 ， 即 可 新 建 一 个 宽 500 像素 、 高 50 像素 的 文件 ， 并 将 其 命名 

为 “导航 条 ”， 如 图 23-2 所 示 。 


本 画 
名 六 (N); 与 找 条 EE 
着 设 人 P): 自 定 - EN 

在 储 澳 设 (5).… 
襄 砍 (W): 500 息 素 所 Ce 
高 度 [H); 50 息 素 
分 训 有 ;于 像素 大 才 “~ 
颜色 模式 IN)， RGB 颜色。 - 8 位 
伞 景 向 容 [C)， 白色 国信 大 
下 可 7a 
图 23-1 【新 建 】 对 话 框 图 23-2 空 自 文档 


Eue) 新 建 【图 层 1】， 选 择 【矩形 选 框 工具 】 绘 制 500 像素 x30 像素 的 导航 轮廓 ， 如 
图 23-3 所 示 。 


依 508 


EC 单 击 工 具 箱 中 的 前 景色 色 块 ， 将 其 设置 为 桶 黄色 “R: 234、G151、B77”， 然 
后 使 用 【油漆 桶 工具 】 填 充 选 中 的 矩形 框 ， 如 


23-3 ”创建 矩 形 选区 


区 于 BY 双击 图 层 的 缩 览 图 ， 在 弹出 的 对 话 框 中 勾 选 左 侧 的 【渐变 琶 加 】 复 选 框 ， 再 设 
置 填充 颜色 ， 其 中 中 间 的 颜色 为 “R77，G142，B186”， 两 端 颜色 为 “R: 8、 
G: 123、B: 109”， 如 图 23-5 所 示 。 

EEC 义 选 【 描 边 】 复 选 框 ， 设 置 描 边 的 颜色 为 “R: 77、G: 142、B: 186” 


置 其 他 参数 ， 如 图 23-6 所 示 。 


| 条 寺村 式 (Ww).。 | 
豆 HRCV) 


图 23-4 所 示 。 


23-4 填充 颜色 
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Calstua | Cacowa |) 
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图 23-5 【图 层 样式 】 对 话 框 
EC 单 击 【 确 定 】 按 钮 ， 效 果 如 图 23-7 所 示 。 


i © 100% (gE 1 RGB/a * 


23-6 ”添加 描 边 图 层 样式 


23-7 ”绘制 的 导航 条 框架 


23.2.2 ”案例 2 一 一 制作 斜纹 


下 面 制作 导航 条 上 的 斜纹 ， 有 具体 操作 步骤 如 下 。 


EEJDp 新 建 【 图 层 2】， 在 按 住 Ctrl 键 的 同时 单 
辑 】 一 【填充 】 菜 单 命令 ， 打 开 【 填 充 】 对 话 框 ， 在 其 中 设置 填充 图 


所 示 。 


EC) 单 击 【 确 定 】 按 钮 ， 将 【不 透明 度 】 设 置 为 43%， 得 到 如 图 23-9 所 示 的 效果 。 


fF 【图 


层 1】 图 层 读 取 选 区 
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ED 
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图 23-8 设置 填充 图 案 图 23-9 填充 选区 

EC) 新 建 【 图 层 3】， 创 建 如 图 23-10 所 示 的 选区 。 

EC 填充 渐变 色 “#366F99” 到 “#5891BA”， 并 给 图 层 添加 【内 阴影 】 图 层 样式 ， 
参数 设置 如 图 23-11 所 示 。 


E33 Es CC 

福生 克基 : 副 汉人 信人) 三 # -mm Cm) 

| Tk mm 国  % CBE 
站 to © 去 回 zsssalal 网 HCV) 

器 状 过 RON gm 起 国 

Er ee 一 

Ban | 

四 尖 变 委 加 

加 国宝 委 训 

加 六 和 

回 必 时 

、 图 23-10 创建 选区 23-11 【图 层 样式 】 对 话 杠 
添加 【 描 边 】， 颜 色 为 “#4D8EBA”， 【位 置 】 选 择 【 内 部 】， 如 图 23-12 


所 示 。 
EEJD 添加 图 层 样式 后 的 效果 如 图 23-13 所 示 。 


二 人 = 一” | 
一 起 相 
广 富 过 现 ! 身 大 人 人 Ce 2 和 7 | 
NE EBP) p= ~ EE 


A > 团 韦 Vv) 


0 ee ~ 5 » 
-一 一 | | 
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图 23-12 【图 层 样式 】 对 话 框 图 23-13 图案 效果 


EC 复制 【图 层 3】， 将 其 移动 到 与 【图 层 3】 对 应 的 位 置 ， 如 图 23-14 所 示 。 

EEJRD) 新 建 【 图 层 4】， 用 “ 兰 16B94” 和 白色 绘制 如 图 23-15 所 示 的 图 像 ， 在 不 取消 
选区 的 情况 下 转换 到 【通道 】 面 板 ， 新 建 Alpha 1 通道 ， 在 选区 内 由 上 到 下 填充 “ 白 
色 一 黑色 一 白色 ”的 渐变 ， 再 按 住 Ctrl 键 的 同时 单 击 该 通道 ， 回 到 【图 层 4】 图 


全 1 


层 ， 按 Ctrl+ShiftrI 组 合 键 进行 反选 后 按 Delete 键 删除 。 


[2 


23-14 ”复制 图 案 23-15 ”绘制 图 形 
ED 复制 几 个 该 图 层 ， 分 别 移动 到 合适 的 位 置 后 对 齐 并 合并 ， 如 图 23-16 所 示 。 
23-16 复制 图 层 


EEC 使 用 【 横 排 文 字 工 具 】 输 入 各 个 导航 文字 ， 合 并 后 加 上 【距离 】 和 【大 小 】 分 
别 为 2 像素 的 投影 ， 最 终 效果 如 图 23-17 所 示 。 


百 矶 | 天 于 玫 科 FS7i 绍 | 作品 层 元 | 联系 我 们 | 肥 情 说 三 


图 23-17 输入 文字 
23.2.3 ”案例 3 一 一 制作 纵向 导航 条 


制作 纵向 导航 条 的 具体 操作 步骤 如 下 。 

EC 新 建 一 个 宽 300 像素 、 高 500 像素 的 文件 ， 将 它 命 名 为 “垂直 导航 条 ”， 如 
图 23-18 所 示 。 

EEJD 单 击 【确定 】 按 钮 ， 创 建 一 个 空白 文档 ， 如 图 23-19 所 示 。 


ET 
投 (P: 自 定 = 本 
A - 
于 (W): 300 
高 诬 (Hj: 500 
分 关 事 (Rj 56.012 。。。 食 案 更 二 ~ 


颜色 模式 (M); RGB 颜色 。 > 8 位 加 
背 且 内容 (c): 白色 


高级 


图 23-18 【新 建 】 对 话 框 图 23-19 空白 文档 


EEC 在 工具 箱 中 单 击 前 景色 色 块 ， 打 开 【 拾 色 器 (前 景色 )】 对 话 框 ， 设 置 前 景色 为 灰 
色 (R: 229、G: 229、B: 229)， 如 图 23-20 所 示 。 
YY 单 击 【 确 定 】 按 钮 ， 按 AlttDelete 组 合 键 填充 颜色 ， 如 图 23-21 所 示 。 
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图 23-20 【 拾 色 器 (前 景色 )】 对 话 框 图 23-21 填充 颜色 


区 于 BY 新建 【图 层 1】， 使 用 【矩形 选 框 工具 】 绘 制 如 下 区 域 ， 然 后 填充 为 白色 ， 如 
图 23-22 所 示 。 

区 TY 双击 【图 层 1】， 打 开 【 图 层 样式 】 对 话 框 ， 给 该 图 层 添加 投影 、 内 阴影 、 渐 变 
车 加 以 及 描 边 样式 ， 单 击 【 确 定 】 按 钮 ， 即 可 看 到 添加 图 层 样式 后 的 效果 ， 如 图 23-23 
所 示 。 


重 直 导航 条 -psd @ 100% (形状 1 副 - 一 “ 口 。 XX 


生 直 号 航 亲 .psd @ 100% (形状 1 副 -- 一 口 。 XX 


图 23-22 ”绘制 矩形 并 填充 白色 图 23-23 ”添加 图 层 样式 
本 于 选择 工具 箱 中 的 【 横 排 文字 工具 】， 输 入 导航 条 上 的 文字 ， 并 设置 文字 的 颜 
色 、 大 小 等 属性 ， 如 图 23-24 所 示 。 
EEC) 选择 工具 箱 中 的 【 自 定 形状 工具 】， 在 上 方 出 现 的 属性 栏 中 选择 自己 喜欢 的 形 
状 ， 如 图 23-25 所 示 。 


[中] 委 直 条 -psd @ 100% (形状 1 一- 一 “ 口 区 


图 23-24 输入 文字 图 23-25 选择 形状 


| 

第 

ET 新 建 【路 径 1】， 绘 制 大 小 合适 的 形状 ， 再 右 击 【路 径 1】， 在 弹出 的 快捷 菜单 。 电 
中 选择 【建立 选区 】 命 令 。 新 建 【图 层 3】， 在 选区 内 填充 上 和 文字 一 样 的 颜色 ， 。 章 
重复 对 齐 操作 ， 效 果 如 图 23-26 所 示 。 网 
ET 合并 除 背景 图 层 之 外 的 所 有 图 层 ， 然 后 复制 合并 之 后 的 图 层 ， 并 调整 其 位 置 。 ”由 
至 此 ， 就 完成 了 垂直 导航 条 的 制作 ， 最 终 效果 如 图 23-27 所 示 。 呐 

六 
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图 23-26 ”绘制 形状 图 23-27 复制 图 层 


23.3” 跟 我 练 练 手 
23.3.1 练习 目标 
E 够 熟练 掌握 本 章 所 讲 内 容 。 
23.3.2 上 机 练习 


练习 1: 制作 横向 导航 条 的 框架 。 
练习 2: 制作 横向 导航 条 的 斜纹 。 
练习 3: 制作 纵向 导航 条 。 


23.4 高 手 甜 点 


甜点 1: 如 何 使 用 联机 滤 镜 
了 Photoshop 的 滤 镜 是 一 种 植 入 Photoshop 的 外 挂 功能 模块 ， 在 使 用 Photoshop 进行 处 理 图 


片 的 过 程 中 ， 如 果 发 现 系统 预 设 的 滤 镜 不 能 满足 设计 的 需要 ， 则 可 以 在 Photoshop CS6 操作 界 
面 中 选择 【 滤 镜 】 一 【浏览 联机 滤 镜 】 菜 单 命令 ， 如 图 23-28 所 示 。 


D4 
si3@ 


全 1 


网 页 设计 与 网 站 建设 
案例 课堂 9 一 


) 视图 
Ctrl 


外 


ShifttCtrlB 
Shi fttCtrl4 
各 ttCtrlHy 


i 村 


1 
中 


23-28 ”选择 【浏览 联机 滤 镜 】 命 令 


打开 Photoshop CS6 的 官方 网 站 ， 在 其 中 选择 需要 下 载 的 滤 镜 插件 ， 然 后 安装 即 可 。 
Photoshop 滤 镜 的 安装 很 简单 ， 一 般 滤 镜 文件 的 扩展 名 为 .8bf， 只 要 将 这 个 文件 复制 到 
Photoshop 目录 下 面 的 Plug-ins 目录 中 就 可 以 了 。 


甜点 2: 为 Photoshop 添加 特殊 的 字体 


在 Photoshop CS6 中 所 使 用 的 字体 ， 其 实 就 是 调用 了 Windows 系统 中 的 字体 ， 如 果 感 觉 
Photoshop 中 字库 文字 的 样式 太 单调 ， 则 可 以 自行 添加 。 首 先 把 自己 喜欢 的 字体 文件 安装 在 
Windows 系统 的 Fonts 文件 夹 下 ， 这 样 就 可 以 在 Photoshop CS6 中 调用 这 些 新 安装 的 字体 。 

对 于 某 些 没有 自动 安装 程序 的 字体 库 ， 可 以 手工 对 其 进行 安装 。 打 开 Windows\Fonts 文 


件 夹 ， 选 择 【 文 件 】 一 【安装 新 字体 】 菜 单 命令 ， 弹 出 【添加 字体 】 对 话 框 ， 把 新 字体 选中 
之 后 单 击 【 确 定 】 按 钮 ， 新 字体 就 安装 成 功 了 。 


觉 元 素 ， 放 


按钮 作为 页 面 的 重要 视 


易 找 、 吻 读 的 区 域 是 必要 的 。 网 页 中 的 边线 在 一 定 程度 上 起 到 了 美化 网 


按钮 是 网 站 设计 不 可 缺少 的 基础 元 素 之 一 。 
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24.1 制作 按钮 


在 个 性 张 显 的 今天 ， 互 联网 也 注重 个 性 的 发 展 ， 不 同 的 网 站 采用 不 同 的 按钮 样式 ， 按 钮 
设计 的 好 坏 直接 影响 了 整个 站 点 的 风格 。 下 面 介绍 几 款 常用 按钮 的 制作 。 


24.1.1 制作 普通 按钮 


面 对 色 彩 丰 富 繁杂 的 网 络 世界 ， 普 通 简洁 的 按钮 赁 其 大 方 经 典 的 样式 得 以 永存 。 制 作 普 
通 按钮 的 具体 操作 步骤 如 下 。 
ET 打开 Photoshop， 按 CtrltN 组 合 键 ， 打 开 【 新 建 】 对 话 框 ， 设 置 【宽度 】 为 250 
像素 ，【 高 度 】 为 250 像素 ， 并 命名 为 “普通 按钮 ”， 如 图 24-1 所 示 。 
ET 单 击 【确定 】 按 钮 ， 新 建 一 个 空白 文档 ， 如 图 24-2 所 示 。 


| 
ET WE 
”” 祷 设 (P); 自 定 "本 Gd) 

宽度 (W): 250 像素 = | CO 
高 度 (H): 250 像素 - 
分 辩 率 (R): 72 像素 /英寸 ~ 

颜色 模式 (N): RGB 丽 色 ”> 8 位 

背景 内 容 (O: 白色 图 你 大 小 : 

BE 183.1K 
24-1 【新 建 】 对 话 框 24-2 ”空白 文档 


ES 新 建 【图 层 1】， 选 择 【 椭 圆 选 框 工具 】， 在 按 住 Shift 键 的 同时 在 图 像 窗 口 画 
出 一 个 200 像素 x200 像素 的 正 圆 ， 如 图 24-3 所 示 。 

EEC 选择 【渐变 工具 】， 并 设置 渐变 颜色 为 “R: 102、G: 102、B: 155” 到 “R: 
230、G: 230、B: 255” 的 渐变 ， 如 图 24-4 所 示 。 


图 24-3 创建 圆 形 选区 图 24-4 设置 渐变 填充 颜色 
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EECDp 在 圆 形 选 框 上 方 单 击 并 向 下 拖 中 鼠标， 填充 从 上 到 下 的 渐变 。 然 后 按 CtrlHD 组 
合 键 取消 选区 ， 如 图 24-5 所 示 。 

EEJDp 新 建 【图 层 2】， 再 使 用 【椭圆 选 框 工具 】 画 出 一 个 170 像素 x170 像素 的 正 
圆 ， 用 【渐变 工具 】 进 行 从 下 到 上 的 填充 ， 如 图 24-6 所 示 。 

ED 选中 【图 层 1】 和 【图 层 2】， 然 后 单 击 下 方 的 【链接 】 按 钮 ， 链 接 两 个 图 层 ， 
如 图 24-7 所 示 。 


图 24-5 ”取消 选区 图 24-6 ”绘制 圆 形 并 填充 颜色 图 24-7 ”链接 两 个 图 层 
EEJRD 选择 【移动 工具 】， 单 击 属性 栏 中 的 【垂直 居中 对 齐 】 和 【水 平 居 中 对 齐 】 按 
钮 ， 以 【图 层 1】 为 准 ， 对 齐 【 图 层 2】， 效 果 如 图 24-8 所 示 。 
ECEIRD 选中 【图 层 2】， 为 图 层 添加 【斜面 和 浮雕 】 效 果 ， 有 具体 参数 设置 如 图 24-9 


所 示 。 


普通 按 望 @ 100% 侦 导 1. 一 口 XX 


24-8 ”对 齐 图 层 


葬 于 DY 选中 【图 层 2】， 为 图 


小 这 泛 基 本 疝 江河 到 这 盐 一 一 游 用 如 > 陈 卫 淹 到 册 tyz 洲 目 


罗 GG 


CC mA 
(WW). | 
回 祯 点 (V) 


24-9 设置 【斜面 和 浮雕 】 参 数 
层 添加 【 描 边 】 效 果 ， 具 体 参 数 设 置 如 图 24-10 所 示 。 


EECDD9 单 击 【 确 定 】 按 钮 ， 完 成 普通 按钮 的 制作 ， 效 果 如 图 24-11 所 示 。 
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| 普通 扩 望 @100% 俩 层 2. 一 口 XX 


回 外 发 光 
EE EE 


24-10 ”设置 【 描 边 】 参 数 24-11 ”制作 的 按钮 


24.1.2 制作 迷你 按钮 
信息 在 网 络 上 有 着 重要 的 地 位 ， 很 多 人 不 想 放 过 可 以 放 一 点 信息 的 空间 ， 于 是 采用 迷你 
按钮 ， 可 爱 又 不 失 得 体 ， 很 受 年 轻 人 士 的 喜爱 。 


制作 迷你 按钮 的 具体 操作 步骤 如 下 。 
ET 打开 Photoshop， 按 CtrlHN 组 合 键 ， 打 开 【 新 建 】 对 话 框 ， 设 置 【宽度 】 为 60 


像素 ，【 高 度 】 为 60 像素 ， 并 命名 为 “迷你 按钮 ”， 如 图 24-12 所 示 。 
EEC 单 击 【确定 】 按 钮 ， 新 建 一 个 空白 文档 ， 如 图 24-13 所 示 。 
EC) 新 建 【 图 层 1】， 用 【椭圆 选 框 工具 】 在 图 像 窗 口 画 一 个 50 像素 x50 像素 的 正 
圆 ， 填 充 橙色 “R: 255、G: 153、B: 0”， 如 图 24-14 所 示 。 


上 [3 
才 利 (N): 进 俐 技 包 CE 
摘 和 (P): 自 定 em 
宏 (W): 60 3 CEE 
名 可 (H 60 ”名 素 > 人 = 器 x 
基 率 (R) 元 全 素 / 奖 于 ~ 
天 本 式 (M): 友 度 、 8 位 > 
俏 果 内 容 (c) 白色 ~ 湖 | 
汪 高 妇 352K 


24-12 【新 建 】 对 话 框 24-13 ”空白 文档 图 24-14 填充 图 形 


EC 选择 【选择 】 一 【修改 】 一 【收缩 】 菜 单 命令 ， 打 开 【 收 缩 选区 】 对 话 框 ， 设 


置 【收缩 量 】 为 7 像素 ， 如 图 24-15 所 示 。 
攻 于 BY 单 击 【 确 定 】 按 钮 ， 可 以 看 到 收缩 之 后 的 效果 ， 然 后 按 Delete 键 删除 ， 可 以 得 


到 如 图 24-16 所 示 的 圆 环 。 
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六 
章 
车 EB 和 
收 纪 里 (0): 7 贸 素 一 页 
Cm 中 
图 24-15 【收缩 选区 】 对 话 框 图 24-16 “收缩 后 的 效果 的 
EEJD9 双击 【图 层 1】， 打 开 【 图 层 样式 】 对 话 框 ， 添 加 【斜面 和 浮雕 】 效 果 ， 有 具体 的 海 
参数 如 图 24-17 所 示 。 | 
ECGDD 单 击 【确定 】 按 钮 ， 得 到 如 图 24-18 所 示 的 圆 环 。 撤 
3 网 
EE se Co 按 
SC 中 = 钮 
= = iN 
J 2 NN 
A 
渐 训 慨 加 
图 案 番 加 
24-17 ”添加 【斜面 和 浮雕 】 效 果 图 24-18 ”环形 图 案 


EECRD) 新 建 【图 层 2】， 用 【椭圆 选 框 工具 】 画 一 个 36 像素 x36 像素 的 正 圆 ， 设 置 前 
景色 为 白色 ， 背 景色 为 灰色 (R: 207、G: 207、B: 207)， 如 图 24-19 所 示 。 

EEC 在 按 住 Shift 键 的 同时 用 【渐变 工具 】 从 左上 和 角 往 右 下 角 拉 出 渐变 。 单 击 属 性 
栏 中 的 【垂直 居中 对 齐 】 按 钮 和 【水 平 居中 对 齐 】 按 钮 使 其 与 边框 对 齐 ， 如 图 24-20 
所 示 。 


ET [E33 
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只 有 web 颜色 icf ko 


图 24-19 【 拾 色 器 (背景 色 )】 对 话 框 图 24-20 对齐 图 层 
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网 页 设计 与 网 站 建设 
案例 课堂 四 一 


EC 选中 【图 层 2】 并 双击 ， 打 开 【 图 层 样式 】 对 话 框 ， 在 其 中 设置 【和 斜面 和 浮雕 】 
参数 ， 如 图 24-21 所 示 。 
EEC 单 击 【 确 定 】 按 钮 ， 得 到 最 终 的 效果 ， 如 图 24-22 所 示 。 


图 24-21 【图 层 样式 】 对 话 框 图 24-22 环形 图 案 
四 于 EY 选择 【 自 定形 状 工具 】， 在 属性 栏 中 选择 自己 喜欢 的 形状 ， 在 这 里 选择 了 “点 ” 
形状 ， 如 果 找 不 到 这 个 形状 ， 可 以 单 击 形状 选择 面板 右上 角 的 按钮 ， 然 后 选择 【全 
部 】 命 令 调 出 全 部 形状 ， 如 图 24-23 所 示 。 
EE》 新 建 路 径 1， 绘制 大 小 合适 的 形状 ， 再 右 击 路 径 ， 在 弹出 的 快捷 菜单 中 选择 【 建 
立 选 区 】 命 令 ， 如 图 24-24 所 示 。 


图 24-23 ” 调 出 全 部 形状 图 24-24 ”建立 选区 
EEE》 新 建 【 图 层 3】， 在 选区 内 填充 上 和 按钮 边框 一 样 的 橙色 ， 重 复 对 齐 操作 ， 效 果 


如 图 24-25 所 示 。 

ECED 双击 【图 层 3】， 在 弹出 的 对 话 框 中 色 选 【内 阴影 】 复 选 框 ， 设 置 相关 参数 ， 如 
图 24-26 所 示 。 

EY 单 击 【确定 】 按 钮 ， 得 到 效果 如 图 24-27 所 示 的 最 终 效 果 。 
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图 24-25 ”对齐 图 层 图 24-26 【图 层 样式 】 对 话 杠 图 24-27 ”最终 的 显示 效果 EN 
24.1.3 ”制作 水 晶 按钮 NN 


水 晶 按 钮 可 以 说 是 最 受 欢 迎 的 按钮 样式 之 一 。 下 面 就 教 大 家 制作 一 款 橘 红色 的 水 晶 按 
钮 ， 具 体操 作 步骤 如 下 。 
EC 打开 Photoshop， 按 CtrlHN 组 合 键 ， 打 开 【 新 建 】 对 话 框 ， 设 置 【宽度 】 为 15 
厘米 ，【 高 度 】 为 15 厘米 ， 并 命名 为 “水 晶 按 钮 ”， 如 图 24-28 所 示 。 
ED 单 击 【 确 定 】 按 钮 ， 新 建 一 个 空白 文档 ， 如 图 24-29 所 示 。 


和 my 水 局 这 { @ 66.7% (RGB/ 引 
和 名称 (N): 水 最 按 国 | 一 二 一) 
逢 设 (p)。 自 定 二 
EO 
殉 度 (W): 15 3 
高 诬 (H): 15 六 
分 状 率 (R): 72 集 素 庶 寺 
颜色 模式 (M): RGB 而 @@ ”> 8 位 
宵 果 内 容 {c)， 白色 
Oh 529.2K 


图 24-28 【新 建 】 对 话 框 图 24-29 ”空白 文档 
区 了 BY 选择 【椭圆 选 框 工具 】 并 双击 ， 在 属性 栏 中 设置 【羽化 】 为 0 像素 ， 勾 选 【 消 
除 锯齿 】 复 选 框 ， 设 置 【 样 式 】 为 【固定 大 小 】，【 宽 度 】 为 350 像素 ，【 高 度 】 
为 350 像素 ， 如 图 24-30 所 示 。 


24-30 ”设置 参数 


EEC 新 建 【图 层 1】， 将 光标 移 至 图 像 窗 口 ， 绘 制 一 个 固定 大 小 的 圆 形 选区 ， 如 图 24-31 
所 示 。 
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网 页 设计 与 网 站 建设 
案例 课堂 »… 


EEJDp 设置 前 景色 为 “C: 0、M: 90、Y: 100、K: 0”， 背 景色 为 “C: 0、M: 40、 
Y: 30、K: 0”。 选 择 【 渐 变 工具 】， 在 属性 栏 中 设置 过 渡 色 为 【前 景色 到 背景 色 
渐变 】， 渐 变 模式 为 【线性 渐变 】， 如 图 24-32 所 示 。 


图 24-31 绘制 圆 形 选区 图 24-32 ”选择 渐变 样式 


ED 选择 【图 层 1】， 再 回 到 图 像 窗口 ， 在 选区 中 按 住 Shift 键 的 同时 由 上 至 下 画 出 
渐变 色 ， 按 Ctrl+D 组 合 键 取消 选区 ， 如 图 24-33 所 示 。 

EC 双击 【图 层 1】， 打 开 【 图 层 样式 】 对 话 框 ， 色 选 【投影 】 复 选 框 ， 设 置 暗 调 颜 
色 为 “C: 0、M: 80、Y: 80、K: 80”， 并 设置 其 他 相关 参数 ， 如 图 24-34 所 示 。 
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24-33 ”渐变 填充 选区 24-34 ”设置 【投影 】 参 数 


ET 勾 选 【内 发 光 】 复 选 框 ， 设 置 发 光 颜 色 为 “C: 0、M: 80、Y: 80、K: 80”， 
并 设置 其 他 相关 参数 ， 如 图 24-35 所 示 。 

TY 单 击 【 确 定 】 按 钮 ， 可 以 看 到 最 终 的 效果 ， 这 时 图 像 中 已 经 初步 显示 出 红色 立 
体 按钮 的 基本 模样 了 ， 如 图 24-36 所 示 。 

EY 新 建 【图 民 2】， 选 择 【 椭 圆 选 框 工 具 】， 将 属性 栏 中 的 【样式 】 设 置 为 【 正 
常 】， 在 【图 层 2】 中 面 出 一 个 椭圆 形 选区 ， 如 图 24-37 所 示 。 

E> 双击 工具 箱 中 的 【以 快速 蒙 版 模式 编辑 】 按 钮 ， 打 开 【 快 速 蒙 版 选项 】 对 话 
框 ， 设 置 蒙 版 颜色 为 蓝 色 ， 如 图 24-38 所 示 。 
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24-37 ”绘制 圆 形 选区 24-38 【快速 蒙 版 选项 】 对 话 框 


EEIP)9 单 击 【确定 】 按 钮 ， 此 时 ， 图 像 中 椭圆 选区 以 外 的 部 分 被 带 有 一 定 透 明度 的 蓝 
色 遮 盖 ， 如 图 24-39 所 示 。 

配对 BY 选择 【画笔 工具 】， 设 置 合 适 的 笔 刷 大 小 和 硬度 ， 将 光标 移 至 图 像 窗口 ， 用 笔 
刷 以 蓝 色 蒙 版 色 遮 盖 部 分 椭圆 ， 如 图 24-40 所 示 。 


图 24-39 添加 莹 版 后 的 效果 图 24-40 ”这 盖 蒙 版 
EC 单 击 工具 箱 中 的 【以 标准 模式 编辑 】 按 钮 ， 这 时 图 像 中 原来 椭圆 形 选区 的 一 部 
分 被 减 去 ， 如 图 24-41 所 示 。 
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网 页 设计 与 网 站 建设 
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EEC 设置 前 景色 为 白色 ， 选 择 【渐变 工具 】， 在 属性 栏 的 【渐变 编辑 器 】 中 设置 
【渐变 模式 】 为 【前 景色 到 透明 渐变 】， 如 图 24-42 所 示 。 


图 24-41 获取 选区 图 24-42 选择 渐变 样式 


四 [> 按 住 Shift 键 ， 同 时 在 选区 中 由 上 到 下 填充 渐变 ， 然 后 按 Ctrl+H 组 合 键 隐藏 选 
区 ， 观 察 效 果 ， 如 图 24-43 所 示 。 

EC 新 建 【 图 层 3】， 按 Ctrl 键 ， 单 击 【图 层 】 面 板 中 的 【图 层 1】， 重 新 获得 圆 形 
选区 ， 选 择 【选择 】 一 【修改 】 一 【收缩 】 菜 单 命令 ， 在 弹出 的 对 话 框 中 设置 【 收 
缩 量 】 为 7 像素 ， 将 选区 收缩 ， 如 图 24-44 所 示 。 


图 24-43 ”填充 选区 图 24-44 ”收缩 选区 


EEC) 选择 【矩形 选 框 工具 】， 将 光标 移 至 图 像 窗口 ， 按 住 Alt 键 ， 由 选区 左上 部 拖 动 
鼠标 到 选区 的 右 下 部 四 分 之 三 处 ， 减 去 部 分 选区 ， 如 图 24-45 所 示 。 

EGR 仍 用 白色 作为 前 景色 ， 并 再 次 选择 【渐变 工具 】，【 渐 变 模式 】 设 置 为 【前 景 
色 到 透明 渐变 】， 按 住 Shift 键 的 同时 在 选区 中 由 下 到 上 做 渐变 填充 ， 之 后 按 Ctrl+HH 
组 合 键 隐藏 选区 ， 观 察 效果 ， 如 图 24-46 所 示 。 


图 24-45 创建 选区 图 24-46 填充 选区 
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EPE 选中 【图 层 3】， 选 择 【 滤 镜 】- 【模糊 】-【 高 斯 模糊 】 菜 单 命令 ， 在 【高 斯 
模糊 】 对 话 框 的 【半径 】 文 本 框 中 填 入 适当 的 数值 ， 如 图 24-47 所 示 。 
EDPD 单 击 【 确 定 】 按 钮 ， 加 上 高 斯 模糊 效果 ， 如 图 24-48 所 示 。 


3 国 
CC ] 
同和 NI(P) 

日 wow% 国 
半径 (R): 7.0 | 像素 


图 24-47 【高 斯 模糊 】 对 话 框 图 24-48 ”应 用 模糊 效果 


E 攻 区 罗 回 到 图 像 窗口 ， 在 【图 层 】 面 板 中 把 【图 层 3】 的 【不 透明 度 】 设 置 为 65%。 至 
此 ， 橘 红色 水 晶 按 钮 就 制作 完成 了 ， 如 图 24-49 所 示 。 
人 合并 所 有 图 层 ， 然 后 选择 【图 像 】 一 【调整 】 一 【色相 /饱和 度 】 菜 单 命令 ， 在 打 
汇 ”。 开 的 对 话 框 中 色 选 【着 色 】〗 复 选 框 ， 可 以 对 按钮 进行 颜色 的 变换 ， 如 图 24-50 所 示 。 
变换 闫 色 后 的 水 晶 按 钮 如 图 24-51 所 示 。 


尝 主 泛 若 叮 疝 洒 河 到 稚 址 一 一 疡 用 全 汪 际 刁 沼 到 册 y7 小 用 


图 24-49 “调整 图 层 的 不 透明 度 。 ”图 24-50 【色相 /饱和 度 】 对 话 框 图 24-51 蓝 色 按钮 
24.1.4 制作 木 纹 按钮 


木 纹 按钮 的 制作 主要 是 利用 滤 镜 功能 来 完成 的 ， 具 体操 作 步 又 如 下 。 

EEJDp 打开 Photoshop， 按 CtrltN 组 合 键 ， 新 建 一 个 宽 200 像素 、 高 100 像素 的 文件 ， 
将 它 命名 为 “ 木 纹 按钮 ”， 如 图 24-52 所 示 。 

葬 于 PY 单 击 【 确 定 】 按 钮 ， 新 建 一 个 空白 文档 ， 如 图 24-53 所 示 。 

ERB9 将 背景 填充 为 白色 ， 然 后 选择 【 滤 镜 】 一 【和 杂 色 】 一 【添加 杂 色 】 菜 单 命令 ， 
在 打开 的 对 话 框 中 ， 设 置 【 数 量 】 为 400%， 【分布 】 为 【高 斯 分 布 】， 再 勾 选 【 单 
色 】 复 选 框 ， 如 图 24-54 所 示 。 
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案例 课堂 >… 


5 加 
名称 (N): 二 六 按 思 E33 
预 设 (P): 自 定 ~ [Ey "| 
存 铺 祯 设 (5).… 
艳 度 (W): 200 像素 对 
高 度 (H): 100 像素 木 到 按 乌 @ 100% (R- 
分 状 硅 (R); 72 像素 英 寺 ~ 
闫 色 模式 (M): RGB 颜色 ~ 8 位 bd 
背景 内 容 (C): 白色 od 图 隐 大 小: 
司 高 58.6k 
24-52 【新 建 】 对 话 框 图 24-53 ”空白 文档 
单 击 【确定 】 按 钮 ， 效 果 如 图 24-55 所 示 。 
Wn el 
mw 加 
孝 黑 (A): 400 。 % 
分 布 
平均 分布 (u) 
加 高 斯 分 布 (0) 
辐 单 色 (N) 
24-54 【添加 杂 色 】 对 话 框 24-55 ”添加 杂 色 后 的 效果 


四 于 BY 选择 【 滤 镜 】 一 【模糊 】 一 【动感 模糊 】 菜 单 命令 ， 打 开 【 动 感 模糊 】 对 话 
框 ， 设 置 【 角 度 】 为 0 或 180 度 ，【 距 离 】 为 999 像素 ， 如 图 24-56 所 示 。 
EECD) 单 击 【 确 定 】 按 钮 ， 得 到 如 图 24-57 所 示 的 效果 。 


角度 [A): 0 | 


图 24-56 【动感 模糊 】 对 话 框 图 24-57 ”应 用 动感 模糊 后 的 效果 


EC 选择 【 滤 镜 】 一 【模糊 】 一 【高 斯 模糊 】 菜 单 命令 ， 打 开 【 高 斯 模糊 】 对 话 
框 ， 设 置 【 半 径 】 为 1 像素 ， 如 图 24-58 所 示 。 
EC) 单 击 【确定 】 按 钮 ， 得 到 如 图 24-59 所 示 的 效果 。 
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图 24-58 【高 斯 模糊 】 对 话 框 图 24-59 ”应 用 高 斯 模糊 后 的 效果 : 
线 


EEC 按 Ctl+U 组 合 键 ， 弹 出 【色相 /饱和 度 】 对 话 框 ， 勾 选 【着 色 】 复 选 框 ， 设 置 
【色相 】 为 30，【 饱 和 度 】 为 45， 【明度 】 为 5， 如 图 24-60 所 示 。 
EC 单 击 【 确 定 】 按 钮 ， 得 到 的 效果 如 图 24-61 所 示 。 


24-60 【色相 /饱和 度 】 对 话 框 24-61 调整 色相 后 的 效果 


四 到 DP 选择 【 滤 镜 】 一 【扭曲 】 一 【旋转 扭曲 】 菜 单 命令 ， 打 开 【 旋 转 扭曲 】 对 话 
框 ， 设 置 【 和 角度 】 为 200 度 ， 如 图 24-62 所 示 。 
EY 单 击 【 确 定 】 按 钮 ， 得 到 如 图 24-63 所 示 的 效果 。 


图 24-62 【旋转 扭曲 】 对 话 框 
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EC 复制 背景 图 层 ， 新 建 【路 径 1〗】， 选 择 【 圆 角 矩 形 工具 】， 在 属性 栏 中 设置 【 半 
径 】 为 15 像素 ， 绘 制 出 按钮 外 形 ， 对 此 路 径 建 立 选 区 ， 选 择 【 选 择 】 一 【反选 】 菜 
单 命令 ， 按 Delete 键 删除 选区 部 分 ， 再 删除 背景 图 层 ， 如 图 24-64 所 示 。 

EE 最 后 添加 图 层 样式 ， 双 击 【背景 副本 】 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 为 图 
层 添加 【斜面 和 浮雕 】 效果， 具体 的 参数 设置 如 图 24-65 所 示 。 
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图 24-64 ”删除 多 余 图 案 图 24-65 【图 层 样式 】 对 话 杠 

本 了 BY 双击 【背景 副本 】 图 层 ， 打 开 【 图 层 样式 】 对 话 框 ， 为 图 层 添加 【等 高 线 】 效 
果 ， 参 数 设 置 如 图 24-66 所 示 。 

> 最 后 单 击 【 确 定 】 按 钮 ， 得 到 最 终 效果 ， 如 图 24-67 所 示 。 
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24-66 ”添加 【等 高 线 】 效 果 24-67 ” 木 纹 按 钮 


读者 还 可 以 通过 更 多 的 图 层 样 式 把 按钮 做 得 更 加 精致 ， 甚 至 可 以 把 它 变 成 红木 


， 在 设计 家 居 网 页 时 或 许 是 种 不 错 的 选择 。 


24.2 制作 装饰 边线 

网 页 图 像 的 装饰 和 造型 不 同 于 绘画 ， 它 不 是 独立 的 造型 艺术 ， 它 的 任务 是 美化 网 页 的 页 
面 ， 给 浏览 者 以 美的 视觉 感受 。 网 页 艺术 的 造型 、 装 饰 ， 根 据 不 同 的 对 象 、 不 同 的 环境 、 不 
同 的 地 域 ， 在 设计 方案 中 的 体现 也 各 不 相同 。 


24.2.1 制作 装饰 虚线 
虚线 可 以 说 在 网 页 中 无 处 不 在 ， 但 在 Photoshop 中 却 没有 虚线 画笔 ， 这 里 教 大 家 两 个 简单 
的 方法 。 


1. 通过 【画笔 工具 〗 实 现 

具体 操作 步骤 如 下 。 

EEC) 按 CtrlHN 组 合 键 ， 新 建 一 个 宽 400 像素 、 高 100 像素 的 文件 ， 将 它 命名 为 “ 虚 
线 1”， 如 图 24-68 所 示 。 

EDDp 选择 【画笔 工具 】， 单 击 属性 栏 右 端的 【切换 画笔 面板 】 按 钮 国 ， 调 出 如 图 
24-69 所 示 的 【画笔 】 面 板 。 


党 卫 泛 若 叮 疝 洒 河 避 稚 址 一 一 疡 虐 全 > 际 卫 沼 到 刷 yz 小 目 


A 


于 5 二 | 
名称 (N)， 虚线 1 [mmm 
8(P)， 自 定 取消 
_ 存 镜 祯 设 (5).. 
宽度 (W); 400 像素 M4 [dd 
高 度 (H): EE 俐 素 ~ 
分 关 吝 [RN: 72 贸 素 贰 寸 ~ 
颜色 模式 (M); RGB 颜色 v 8 位 关 | 
背景 内 容 (CO): 白色 ~ 国信 大 小 
司 训 117.2K 
24-68 【新 建 】 对 话 框 24-69 【画笔 】 面 板 


EEJep 选择 【 尖 角 3】 画 笔 ， 再 勾 选 面板 左 则 的 【 双 和 


3】 粗 一 些 的 画笔 ， 在 这 里 选择 的 是 【 尖 角 9】 画 笔 ， 
板 下 部 的 预览 框 中 已 经 出 现 了 虚线 ， 如 图 24-70 所 示 。 


画笔 】 复 选 框 ， 选 择 比 【人 尖 角 
并 设置 其 他 参数 ， 可 以 看 到 面 


EEC 新 建 【 图 层 1】， 在 图 像 窗 口中 按 住 Shift 键 的 


所 示 。 


同时 画 出 虚线 ， 效 果 如 图 24-71 
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— 通过 【画笔 工具 】〗 实 现 的 虚线 并 不 是 很 美观 ， 看 上 去 比较 随便 ， 而 且 画 出 来 的 虚 


了 提示 
汇 线 的 颜色 和 真实 选择 的 颜色 有 出 入 。 下 面 介 绍 如 何 使 用 【定义 图 案 】 命 令 来 实现 虚线 
的 制作 。 


图 24-70 设置 画笔 参数 图 24-71 绘制 虚线 
2. 通过 【定义 图 案 〗 实 现 


本 于 按 CtrltN 组 合 键 ， 新 建 一 个 宽 16 像素 、 高 2 像素 的 文件 ， 将 它 命名 为 “虚线 图 

案 ”， 如 图 24-72 所 示 。 
区 了 BY 放大 图 像 ， 新建 【图 层 1】， 用 【和 矩形 选 框 工具 】 绘 制 一 个 宽 8 像素、 高 2 像素 
的 选区 ， 在 【图 层 1】 上 填充 黑色 ， 取 消 选 区 ， 如 图 24-73 所 示 。 


三 画 Er 了 RCH 
名 称 (N): 看 了 案 [| 
8(P)， 自 定 > 取消 
存 铺 才 设 (5)， 
宽度 (W): 16 像素 染 出 
高 度 (H): 2 像素 ~ 
分 状 率 (R); 72 像素 /英寸 ~ 
颜色 模式 (M): [SEE -3 位 人 
前 时 内 容 (CO) 白色 A 
高 人 
24-72 【新 建 】 对 话 框 图 24-73 ”绘制 矩形 并 填充 颜色 


Eeep 选择 【编辑 】 一 【定义 图 案 】 菜 单 命令 ， 打开 【图 案 名 称 】 对 话 框 ， 输 入 图 案 
的 名 称 ， 然 后 单 击 【 确 定 】 按 钮 ， 如 图 24-74 所 示 。 

EEC 按 CtrlHN 组 合 键 ， 新 建 一 个 宽 400 像素 、 高 100 像素 的 文件 ， 将 它 命 名 为 “ 虚 
线 2”， 如 图 24-75 所 示 。 
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交加 


第 

名 

名 称 (ID: 虚线 2 EC 前 

预 届 (P): 自 定 ~ | 网 

| 存 缚 祯 设 (5).…。 | 页 

宽度 (W): 400 伪 素 = 部 和 8([ 中 

高 项 (H): 100 FF 四 洒 

分 刍 诗 (R): 72 外 素 放 十“ 的 

商 色 模式 (M): R68 着色 “> 8 位 加 蓝 

一 -= 一 背景 内 容 (C): 白色 如 本 和 大 小 海 
人 名 称 (0: Ps 时 一 3 高 级 117.2K | 


图 24-74 【图 案 名 称 】 对 话 框 图 24-75 【新 建 】 对 话 框 

EDJD 新 建 【 图 层 1】， 用 【和 矩形 选 框 工 具 】 绘 制 一 个 宽 350 像素 、 高 2 像素 的 选区 ， 
如 图 24-76 所 示 。 

EC 在 选区 内 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【填充 】 命 令 ， 打 开 【 填 充 】 对 话 
框 ， 其 中 【 自 定 图 案 】 选 择 之 前 做 的 虚线 图 案 ， 如 图 24-77 所 示 。 


沾 司 海 斑 册 侣 六 司 习 褒 


GG 


点 线 2 @ 100% RGB 可 


24-76 ”绘制 矩形 24-77 【填充 】 对 话 框 


EC 单 击 【 确 定 】 按 钮 ， 即 可 填充 矩形 ， 然 后 按 CtrltD 组 合 键 ， 取 消 选 区 ， 最 终 效 
果 如 图 24-78 所 示 。 


图 24-78 绘制 的 虚线 


24.2.2 ”制作 分 割 线条 


内 嵌 线 条 在 网 页 设计 中 应 用 较 多 ， 主 要 用 来 反映 自然 的 光照 效果 和 表现 界面 的 立体 感 。 
制作 线条 的 具体 操作 步 又 如 下 。 
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EEJDp 按 CalHN 组 合 键 ， 新 建 一 个 宽 400 像素 、 高 40 像素 的 文件 ， 将 它 命名 为 “内 英 
线条 ”， 如 图 24-79 所 示 。 

本 于 BY 新 建 【 图 层 1】， 选 择 一 些 中 性 的 颜色 填充 图 层 ， 如 这 里 选择 紫色 ， 使 线条 画 在 
上 面 可 以 看 得 清楚 ， 如 图 24-80 所 示 。 


FE [ee] 
[| 
i 
醋 Wi 
EE 
3 
Ee 
i a 
图 24-79 【新 建 】 对 话 框 图 24-80 填充 紫色 


EEC) 新 建 【 图 层 2】， 选 择 【铅笔 工具 】， 线 宽 设 置 成 1 像素 ， 在 按 住 Shift 键 的 同 
时 在 图 像 上 画 一 条 黑色 的 直线 ， 画 好 一 条 后 可 以 再 复制 一 条 并 把 它们 对 齐 ， 如 图 24-81 
所 示 。 

EEC 新 建 【 图 层 3】， 把 线 宽 设 置 成 2 像素 ， 然 后 再 按 上 面 的 方法 画 两 条 白色 的 线 ， 

如 图 24-82 所 示 。 


CT 


图 24-81 绘制 黑色 直线 图 24-82 ”绘制 白色 线条 
区 对 BD 把 【图 层 3】 拖 忠 到 【图 层 2】 的 下 层 ， 然 后 选择 【移动 工具 】， 把 两 条 白色 线 
条 拖 动 到 黑色 线条 的 右 下 角 一 个 像素 处 。 至 此 ， 可 以 看 到 添加 的 立体 效果 ， 如 图 24-83 
所 示 。 
EEJp 在 【图 层 】 面 板 中 设置 【图 层 3】 的 混合 模式 为 【和 柔 光 】， 这 样 装饰 性 内 嵌 线 条 
就 制作 完成 了 ， 如 图 24-84 所 示 。 


图 24-83 ” 拖 动 线条 图 24-84 设置 图 层 样式 
24.2.3 ”制作 和 斜纹 区 域 


下 面 使 用 【定义 图 案 】 命 令 来 制作 斜纹 区 域 ， 具 体操 作 步骤 如 下 。 
本 TD 按 CulHN 组 合 键 ， 新 建 一 个 宽 4 像素 、 高 4 像素 的 文件 ， 将 它 命名 为 “斜纹 


使 532 


局 


案 ”， 如 图 24-85 所 示 。 
EEC 放大 图 像 ， 新 建 【图 层 1】， 用 【和 矩形 选 框 工具 】 选 择 选 区 ， 如 图 24-86 所 示 。 


| 
第 
DN 
小 | 
EE 
网 
页 
中 
人 
的 
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海 


3 
名 称 (0): 审 坟 国 案 CC 三 ) 
预 设 [IP); 自 定 一 取消 
[0 Pr 
帘 度 (VW): + 多 素 - 有 
高 度 (H): 4 色素 
分 辩 率 (R): 72 舟 索 英寸 ~ 
而 色 模式 (N): EE 二 二 8 位 - | 
背景 内 容 (0): 白色 dd A 报 
Se tt 网 
页 
按 
图 24-85 【新 建 】 对 话 框 图 24-86 ”绘制 矩形 NN 
设置 前 景色 为 灰色 ， 按 AlttDelete 组 合 键 删除 选区 ， 如 图 24-87 所 示 。 NN 
ED 选择 【编辑 】 一 【定义 图 案 】 菜 单 命令 ， 打 开 【 图 案 名 称 】 对 话 框 ， 输 入 图 案 ” 线 SS 
的 名 称 ， 然 后 单 击 【确定 】 按 钮 ， 如 图 24-88 所 示 。 


更 要 和 不 EJ 
草 
“图 00: 二 [La 十 
四 名 00: RE 本 Cm | 
24-87 ”删除 选区 24-88 【图 案 名 称 】 对 话 框 


EEJD) 按 CtrltN 组 合 键 ， 新 建 任 意 长 宽 的 文件 ， 将 它 命 名 为 “斜纹 线条 ”， 如 图 24-89 
所 示 。 

EC 新 建 【 图 层 1】， 按 Ctrl+A 组 合 键 全 选 ， 右 击 选区 ， 在 弹出 的 快捷 菜单 中 选 
择 【 填 充 】 命令， 打开 【填充 】 对 话 框 ，【 自 定 图 案 】 选 择 之 前 制作 的 斜纹 图 案 ， 如 

24-90 所 示 。 


四 ] fm @ 100% RGE/®) 


图 24-89 ”空白 文档 24-90 【填充 】 对 话 框 
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EC 单 击 【确定 】 按 钮 ， 即 可 得 


24.3.1 


到 如 图 24-91 所 示 的 效果 。 


24-91 ”斜纹 效果 


24.3” 跟 我 练 练 手 
练习 目标 


能 够 熟练 掌握 本 章 所 讲 内 容 。 


24.3.2 


上 机 练习 


练习 1: 制作 按钮 。 
练习 2: 制作 装饰 边线 。 


24.4 高 手 甜 点 


甜点 1: 如 何 选择 图 像 的 色彩 模式 


在 Photoshop CS6 中 ， 图 像 的 色彩 模式 有 RGB 模式 、CMYK 模式 、GrayScale 模式 以 及 
其 他 色彩 模式 。 对 于 图 像 色彩 模式 的 选择 要 看 图 像 的 最 终 用 途 。 如 果 图 像 要 在 印刷 纸 上 打印 
或 印刷 ， 最 好 采用 CMYK 色彩 模式 ， 这 样 在 屏幕 上 所 看 见 的 颜色 和 输出 打印 颜色 或 印刷 的 颜 
色 比 较 接 近 。 如 果 图 像 用 于 电子 媒体 显示 (如 网 页 、 电 脑 投影 、 录 像 等 )， 则 图 像 的 色彩 模式 最 


好 用 RGB 


模式 ， 因 为 RGB 模式 的 颜色 更 鲜艳 、 更 丰富 ， 画 面 也 更 好 看 些 。 并 且 RGB 图 像 


的 通道 只 有 3 个 ， 数 据 量 小 些 ， 所 占 磁盘 空间 也 较 小 。 如 果 图 像 是 灰色 的 ， 则 用 GrayScale 模 


式 较 好 ， 因 


为 即使 是 用 RGB 或 CMYK 色彩 模式 表达 图 像 ， 看 起 来 仍然 是 中 性 灰 颜色 ， 但 其 


占用 的 磁盘 空间 却 大 得 多 。 另 外 灰色 图 像 在 印刷 时 ， 如 用 CMYK 模式 表示 ， 出 菲林 及 印刷 时 


有 4 个 版 ， 


费用 高 不 说 ， 还 可 能 引起 印刷 时 灰 平衡 控制 不 好 的 偏 色 问题 。 当 有 一 色 印刷 墨 量 


过 大 时 ， 会 使 灰色 图 像 产 生 偏 色 。 


甜点 2: 制作 网 页 按钮 与 边框 主要 应 用 哪些 功能 


在 使 用 Photoshop CS6 设计 并 制作 网 页 按钮 与 边框 时 ， 主 要 用 到 Photoshop 的 图 层 样式 和 
渐变 填充 功能 。 图 层 样式 与 渐变 填充 功能 界面 中 包含 有 多 种 设置 参数 ， 参 数 不 同 ， 所 设计 出 
的 效果 也 不 相同 。 要 想 制作 出 精美 的 网 页 按钮 与 边框 ， 最 简单 的 方式 就 是 更 改 图 层 样 式 中 的 
参数 值 和 改变 渐变 填充 的 颜色 。 
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常见 的 动画 形式 为 逐 帧 动画 、 形 状 补 间 动 
、 遮 音 动 画 等。 本 章 就 来 介绍 使 用 Flash 
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可 以 制作 网 站 动画 效果 。 


使 用 Flash 


2 
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画 、 补 间 动 画 、 传 统 补 间 动 画 、 引 导 动 画 


制作 动画 的 相关 知识 。 
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25.1 了 解 Flash CS6 


Flash CS6 软件 是 交互 创作 的 业界 标准 ， 可 用 于 提供 跨 个 人 计算 机 、 移 动 设备 以 及 几乎 任 
何 尺寸 和 分 辨 率 的 屏幕 一 致 呈现 的 令 人 痴迷 的 互动 体验 。 使 用 Flash 中 的 诸多 功能 ， 可 以 创建 
许多 类 型 的 应 用 程序 ， 如 动画 、 游 戏 等 。 


25.1.1 绘制 矢量 图 

利用 Flash 的 矢量 绘图 工具 ， 可 以 绘制 出 具有 丰富 表现 力 的 作品 。 矢 量 绘图 是 Flash 编辑 
环境 的 基本 功能 之 一 。 在 它 所 提供 的 绘图 工具 了 | 
中 ， 不 仅 有 传统 的 圆 、 方 和 直线 等 绘制 工具 ， 而 
且 有 专业 的 贝 赛 尔 曲线 绘制 工具 ， 如 图 25-1 所 示 。 


25.1.2 ”设计 制作 动画 
动画 设计 是 Flash 最 普遍 的 应 用 ， 其 基本 的 


[一 


形式 是 “ 帧 到 帧 动画 ”， 这 也 是 传统 手动 绘制 动 图 25-1 绘制 矢量 图 
画 的 主要 工作 方式 ， 如 图 25-2 所 示 。 
Flash CS6 提供 了 几 种 在 文档 中 添加 动画 的 方法 。 
e@ ” 补 间 动 画 技术 。 一 些 有 规律 可 循 的 运动 和 变形 ， 只 需要 制作 起 点 帧 和 终点 帧 ， 并 对 
两 帧 之 间 的 运动 规律 进行 准确 的 设置 ， 计 算 机 就 能 自动 地 生成 中 间 过 滤 帧 ， 如 图 25-3 
所 示 。 


J dp 放 ce Him 三 


图 25-2 【时 间 轴 】 面板 图 25-3 ” 补 间 动 画 技术 
®。 ”通过 在 【时 间 轴 】 面 板 中 更 改 连 续 帧 的 内 容 来 创建 动画 ， 如 图 25-4 所 示 。 可 以 在 舞 
台中 创作 出 移动 对 象 、 旋 转 对 象 、 增 大 或 减 小 对 象 大 小 、 改 变 颜 色 、 淡 入 淡出 ， 以 
及 改变 对 象形 状 等 。 更 改 既 可 以 独立 于 其 他 更 改 ， 也 可 以 和 其 他 更 改 互 相 协调 。 


与 名 Tlie dp I pl te Om: Emi Ss 


25-4 【时 间 轴 】 面 板 
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25.1.3 ”强大 的 编程 功能 


动作 脚本 是 Flash CS6 的 脚本 编写 语言 ， 可 以 使 
影片 具有 交互 性 。 动 作 脚本 提供 了 一 些 元 素 ， 可 以 将 
这 些 元 素 组 织 到 脚本 中 ， 指 示 影 片 要 进行 什么 操作 
可 以 对 影片 进行 脚本 设置 ， 使 单 击 鼠 标 和 按 下 键盘 键 
之 类 的 事件 可 以 触发 这 些 脚本 。 

在 Flash 中 ， 可 以 通过 【动作 】 面 板 编写 脚本 ， 
如 图 25-5 所 示 。 在 标准 编辑 模式 下 使 用 该 面板 ， 可 
以 通过 从 菜单 和 列表 中 选择 选项 来 创建 脚本 ; 在 专家 
编辑 模式 下 使 用 该 面板 ， 可 以 直接 向 脚本 窗 格 中 输入 
脚本 。 在 这 两 种 模式 下 ， 代 码 提示 都 可 以 帮助 完成 动 
作 和 插入 属性 及 事件 。 


25.2 


形 的 分 层 顺 序 。 


25.2.1 认识 图 层 


认识 图 层 与 时 间 轴 


无 论 是 绘制 图 形 还 是 制作 动画 ， 图 层 和 时 间 轴 都 是 至 关 重要 的 。 图 层 用 于 放置 编辑 对 
象 ; 时 间 轴 用 于 显示 Flash 显示 图 形 和 其 他 项 目 元 素 的 时 间 ， 使 用 时 间 轴 可 以 指定 舞台 上 各 图 


I 
be 
a 
Ea 章 
PETRI 人 本 二 和 
国 2 有 -| 让 
国 ncicnscript20 半 
时 5 网 
5 
国 sa 页 
HE 更 
a ' 
国 翅 绚 
园 大 sa 阴 ， 
国 saa 
国 ss 
国 了 
园 二 | 


日 8:4 同 
| 识 1 生 [ 闫 1 行 ) ,第 1 列 


海产 画 蛙 注 排 二 到 稚 址 一 一 


25-5 【动作 】 面板 


使 用 图 层 可 以 组 织 文 档 中 的 插图 ， 可 以 在 图 层 上 绘制 和 编辑 对 象 ， 而 不 影响 其 他 图 层 上 
的 对 象 。 如 果 一 个 图 层 上 没有 内 容 ， 那 么 就 可 以 透 过 它 看 到 下 面 的 图 层 ， 如 图 25-6 所 示 。 

在 【时 间 轴 】 面 板 的 图 层 控 制 区 中 ， 可 以 进行 增加 图 层 、 删 除 图 层 、 隐 藏 图 层 、 锁 定 图 
层 等 操作 ， 如 图 25-7 所 示 。 一 旦 选中 了 某 个 图 层 ， 图 层 名 称 的 右边 就 会 出 现 铅笔 图 标 国 ， 表 


示 该 图 层 或 图 层 文件 夹 已 被 激活 。 
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25-6 图 层 
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25-7 ”图 层 控制 区 
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25.2.2 图 层 的 基本 操作 


新 建 Flash 影片 后 ， 系 统 会 自动 地 生成 一 个 图 层 ， 并 将 其 命名 为 “图 层 1”。 当 【时 间 
轴 】 面 板 中 有 多 个 图 层 时 ， 若 要 激活 某 个 图 层 ， 应 在 【时 间 轴 】 面 板 中 选中 该 图 层 ， 或 者 选 
中 该 图 层 中 的 某 个 舞台 对 象 ， 这 时 该 图 层 的 右 侧 会 出 现 铬 笔 图 标 国 ， 表 示 可 以 对 它 进行 编辑 ， 
如 图 25-8 所 示 。 


1， 添加 图 层 


新 创建 的 影片 中 只 有 一 个 图 层 ， 根 据 需 要 可 以 增加 多 个 图 层 。 进 行 以 下 的 操作 可 以 添加 
图 层 。 
(1) 单 击 【时 间 轴 】 面 板 左下 方 的 【新 建 图 层 】 按 钮 回 ， 如 图 25-9 所 示 。 
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图 25-8 选中 图 层 图 25-9 【新 建 图 层 】 按 钮 


(2) 选择 【插入 】 一 【时 间 轴 】 一 【图 层 】 菜 单 命令 ， 如 图 25-10 所 示 。 
(3) 右 击 【 时 间 轴 】 面 板 的 图 层 控制 区 ， 在 弹出 的 快捷 菜单 中 选择 【插入 图 层 】 命 令 ， 如 
图 25-11 所 示 。 


修改 (M) 文本 [T) 命令 (QO 控制 (0) 调 (D) 三口 ( 
新 建 元 件 (N)… 
补 同 动 画 V) 
补 辣 形 枯 (7) 
传统 补 同 (C) 


对 间 绊 () 
场景 (S) 


25-10 选择 【图 层 】 菜 单 命令 图 25-11 选择 【插入 图 层 】 命 令 


5 到 | 系统 默认 的 插入 图 层 的 名 称 是 “图 层 1”、“ 图 层 2”、“ 图 层 3” 等 。 要 重新 命 
SS 名 图 层 ， 只 要 双击 需要 重新 命名 图 层 的 名 称 ， 然 后 在 被 选中 图 层 的 名 称 字段 中 输入 新 
的 名 称 即 可 。 


2. 选取 多 个 图 层 


(1) 选取 相 邻 图 层 的 具体 操作 步骤 如 下 。 
ET 单 击 要 选取 的 第 一 个 图 层 。 
EDUD) 按 住 Shift 键 ， 然 后 单 击 要 选取 的 最 后 一 个 图 层 ， 即 可 选取 这 两 个 图 层 之 间 的 所 


有 图 层 ， 如 图 25-12 所 示 。 
(2) 选取 不 相 邻 图 层 的 具体 操作 步骤 如 下 。 
单 击 要 选取 的 第 一 个 图 层 。 


EECRUPp 按 住 Ctl 键 , 然后 单 击 需 要 选取 的 其 他 图 层 ， 即 可 选取 不 相 邻 图 层 ， 如 图 25-13 
所 示 。 
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图 25-12 选取 相 邻 图 层 
3， 移动 图 层 


图 25-13 ”选取 不 相 邻 图 层 


在 图 层 控制 区 中 将 指针 移 到 图 层 名 上 ， 然 后 按 下 鼠标 左 键 拖 披 图 层 ， 这 时 会 产生 一 条 虚 
线 ， 当 虚线 到 达 预 定位 置 后 释放 鼠标 ， 即 可 移动 图 层 ， 如 图 25-14 所 示 。 


4. 复制 图 层 


选中 需要 复制 的 图 层 ， 按 下 鼠标 左 键 拖 电 图 层 到 【新 建 图 层 】 按 钮 之 上 ， 即 可 复制 该 图 层 。 
还 可 以 选择 【编辑 】 一 【时 间 轴 】 一 【复制 图 层 】 菜 单 命令 ， 进 行 复制 图 层 ， 如 图 25-15 所 示 。 


图 25-14 ”移动 图 层 
5。 删除 图 层 


25-15 ”复制 图 层 


删除 图 层 的 具体 操作 步骤 如 下 。 

GET 选取 要 删除 的 图 层 。 

EDED) 进行 下 列 任何 一 项 操作 ， 都 可 以 删除 图 层 。 

(D 单 击 【时 间 轴 】 面 板 中 的 【删除 】 按 钮 国 ， 如 图 25-16 所 示 。 
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(2) 将 要 删除 的 图 层 拖 电 到 【删除 】 按 钮 祯 的 位 置 ， 如 图 25-17 所 示 。 


25-16 单 击 【删除 】 按 钮 图 25-17” 拖 动 图 层 到 【删除 】 按 钮 之 上 


(3) 右 击 【 时 间 轴 】 面 板 中 的 图 层 控 制 区 ， 从 弹出 的 快捷 菜单 中 选择 【删除 图 层 】 命 
令 ， 如 图 25-18 所 示 。 


6， 创 建 运动 引导 层 


运动 引导 层 是 为 了 给 绘画 提供 帮助 ， 所 有 的 运动 引导 层 名 称 的 前 面 都 有 一 个 图 标 国 。 运 
动 引 导 层 不 出 现在 发 布 后 的 影片 中 ， 只 起 向 导 的 作用 ， 如 图 25-19 所 示 。 
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图 25-18 选择 【删除 图 层 】 命 令 图 25-19 运动 引导 层 


如 果 要 将 某 个 图 层 设置 为 引导 层 ， 可 以 在 该 图 层 上 右 击 ， 然 后 从 弹出 的 快捷 菜单 中 选择 
【引导 层 】 命 令 ， 如 图 25-20 所 示 。 


图 25-20 选择 【引导 层 】 命 令 


pa 如 果 需 要 将 运动 引导 层 恢复 为 普通 层 ， 可 以 在 运动 引导 层 上 右 击 ， 然 后 从 弹出 的 
六 、 快捷 菜单 中 撤销 选择 【引导 层 】 命 令 即 可 。 


25.2.3 ”认识 【时 间 轴 】 面 板 


对 Flash 来 说 ， 时 间 轴 至 关 重 要 ， 可 以 说 ， 时 间 轴 是 动画 的 灵魂 。 只 有 熟悉 了 【时 间 轴 】 
面板 的 操作 和 使 用 的 方法 ， 才 能 在 制作 动画 的 时 候 得 心 应 手 ， 如 图 25-21 所 示 。 

在 【时 间 轴 】 面 板 中 ， 文 档 每 个 图 层 中 的 帧 显示 在 该 图 层 名 右 侧 的 一 行 中 。 顶 部 的 时 间 
轴 标 题 指示 帧 编号 ， 播 放 头 指示 当前 在 舞台 中 显示 的 帧 。 时 间 轴 状态 显示 在 【时 间 轴 】 面 板 
的 底部 ， 可 显示 当前 帧 频 、 帧 速率 以 及 到 当前 帧 为 止 的 运行 时 间 ， 如 图 25-22 所 示 。 
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图 25-21 【时 间 轴 】 面板 图 25-22 时间 轴 中 的 帧 


若 要 更 改 时 间 轴 中 的 帧 显示 ， 则 可 单 击 【 时 间 轴 】 面板 右上 角 的 【 帧 视图 】 按 钮 ， 此 时 
可 弹出 【 帧 视图 】 菜 单 ， 如 图 25-23 所 示 。 
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25-23 【 帧 视图 】 菜 单 


根据 弹出 菜单 ， 用 户 可 以 更 改 帧 单元 格 的 宽度 和 减 小 帧 单元 格 行 的 高 度 ， 要 打开 或 关闭 
用 彩色 显示 帧 顺序 ， 则 可 选择 【彩色 显示 帧 】 命 令 。 


25.2.4 【时 间 轴 】 面 板 的 基本 操作 


在 【时 间 轴 】 面 板 中 可 以 对 帧 或 关键 帧 进行 如 下 修改 ， 具 体操 作 方法 如 下 。 

(1) 插入 、 选 择 、 删 除 和 移动 帧 或 关键 帧 。 

(2) 将 帧 和 关键 帧 拖 到 同一 图 层 中 的 不 同位 置 ， 或 是 拖 到 不 同 的 图 层 中 ， 如 图 25-24 
所 示 。 
(3) 复制 和 粘贴 帧 和 关键 帧 ， 如 图 25-25 所 示 。 
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图 25-24” 拖 动 帧 图 25-25 复制 帧 


(4) 将 关键 帧 转换 为 空白 帧 ， 如 图 25-26 所 示 。 
(5) 从 【 库 】 面 板 中 将 一 个 项 目 拖 动 到 舞台 上 ， 从 而 将 该 项 目 添加 到 当前 的 关键 帧 中 ， 如 
图 25-27 所 示 。 
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图 25-26 转换 帧 图 25-27 ”添加 关键 帧 


25.3 ”制作 常用 简单 动画 
本 节 主要 介绍 Flash CS6 中 常用 的 动画 形式 ， 以 及 制作 这 些 简单 动画 的 操作 方法 。 
25.3.1 制作 逐 帧 动画 
逐 帧 动画 技术 利用 人 的 视觉 暂 留 原理 ， 快 速 地 播放 连续 的 、 具 有 细微 差别 的 图 像 ， 使 原 


来 静止 的 图 形 运 动 起 来 。 要 创建 逐 帧 动画 ， 需 要 将 每 个 帧 都 定义 为 关键 帧 ， 然 后 给 每 个 帧 创 
建 不 同 的 图 像 。 


制作 逐 帧 动画 的 具体 操作 步骤 如 下 。 

ET 在 Flash CS6 窗口 中 选择 【文件 】-_ 【导入 】-_ 【导入 到 舞台 】 菜 单 命令 ， 然 后 
在 弹出 的 【导入 】 对 话 框 中 找到 存放 连续 图 片 的 文件 夹 素材 ， 如 图 25-28 所 示 。 

ET 在 对 话 框 中 选中 一 组 动作 连续 的 图 片 中 的 任意 一 张 。 单 击 【 打 开 】 按钮 ， 弹 出 
一 个 对 话 框 ， 提 示 是 否 导入 所 有 的 图 片 文件 ， 如 图 25-29 所 示 。 
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| 
图 25-28 【导入 】 对 话 框 图 25-29 ”提示 对 话 框 
EC) 单 击 【是 】 按 钮 ， 这 样 一 组 共 6 张 图 片 就 会 自动 地 导入 连续 的 帧 中 ， 如 图 25-30 
所 示 。 


按 Ctrl+Enter 组 合 键 ， 即 可 浏览 动画 ， 如 图 25-31 所 示 。 


图 25-30 【时 间 轴 】 面 板 图 25-31 浏览 动画 


25.3.2 ”制作 形状 补 间 动 画 

形状 补 间 适用 于 图 形 对 象 ， 在 两 个 关键 帧 之 间 可 以 制作 出 变形 的 效果 ， 让 一 种 形状 随时 
间 变 换 成 另外 一 种 形状 ， 还 可 以 对 形状 的 位 置 、 大 小 和 颜色 等 进行 渐变 。 

1. 制作 简单 变形 


让 一 种 形状 变换 成 另外 一 种 形状 的 具体 操作 步骤 如 下 。 
EEJDp 使 用 绘图 工具 在 舞台 上 拉 出 一 个 随意 大 小 无 边框 的 矩形 ， 这 是 变形 动画 的 第 1 
帧 ， 如 图 25-32 所 示 。 
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莉 于 BY 选中 第 10 帧 ， 按 F7 键 插入 空白 关键 帧 。 在 工具 箱 中 选择 【文本 工具 】， 在 舞 
台 上 输入 字母 j， 然 后 选中 字母 j， 在 【属性 】 面 板 的 【字符 】 选 项 组 的 【系列 】 下 
拉 列 表 框 中 选择 Webdings 选项 ，j 变 成 “飞机 ”形状 ， 如 图 25-33 所 示 。 


边 扣 : 异 00 像素 动 04 贸 素 


图 25-32 ”绘制 矩形 图 25-33 绘制 飞机 形状 


葬 于 BY 接 Ctrl+B 组 合 键 将 “飞机 ”字符 分 离 ， 这 样 就 能 作为 变形 结束 帧 的 图 形 ， 如 
图 25-34 所 示 。 


Flash 不 能 对 组 、 符 号 、 字 符 或 位 图 图 像 进行 形状 变形 ， 所 以 要 将 字符 打 散 。 
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EEDz 在 【时 间 轴 】 面 板 中 选取 第 1 帧 ， 然 后 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【创建 
补 间 形状 】 命 令 ， 如 图 25-35 所 示 。 
ED 至 此 变形 动画 制作 完成 ， 用 鼠标 拖 电 播 放 头 即 可 查看 变形 的 过 程 。 


图 25-34 分 离 飞机 字符 图 25-35 创建 补 间 形 状 
2. 控制 变形 


如 果 制 作 的 变形 效果 不 太 理想 ， 则 可 使 用 Flash 的 变形 提示 点 ， 它 可 以 控制 复杂 的 变形 。 
变形 提示 点 用 字母 表示 ， 以 便于 确定 在 开始 形状 和 结束 形状 中 的 对 应 点 ， 如 图 25-36 所 示 。 

下 面 接着 上 一 小 节 的 步骤 4 继续 进行 操作 。 

EEC 确定 已 选中 第 1 帧 ， 选 择 【 修 改 】 一 【形状 】 一 【添加 形状 提示 】 菜 单 命令 ， 
工作 区 中 会 出 现 变形 提示 点 鲁 ， 接 着 将 其 移 到 左上 角 的 位 置 ， 如 图 25-37 所 示 。 
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图 25-36 ”创建 变形 飞机 图 25-37 ”确定 图 形 位 置 吕 

EDDD 选择 第 10 帧 ， 然 后 将 变形 提示 点 鲁 移动 到 左上 角 的 位 置 ， 如 图 25-38 所 示 。 邢 
区 于》 重复 上 述 过 程 ， 增 加 其 他 变形 提示 点 ， 并 分 别 设置 它们 在 开始 形状 和 结束 形状 必 
时 的 位 置 ， 如 图 25-39 所 示 。 作 
再 次 移动 播放 头 ， 就 可 以 看 到 加 上 提示 点 后 的 变形 动画 ， 如 图 25-40 所 示 。 风 
月 

| ~ 和 

eg 昌 

特 

效 


图 25-38 ”移动 变形 提示 点 图 25-39 ”移动 其 他 点 图 25-40 ”变形 动画 效果 
25.3.3 ”制作 补 间 动 画 


补 间 动 画 就 是 在 一 个 图 层 的 两 个 关键 帧 之 间 建 立 补 间 动 画 关系 后 ，Flash 会 在 两 个 关键 帧 
之 间 自 动 地 生成 补充 动画 图 形 的 显示 变化 ， 以 得 到 更 流畅 的 动画 效果 。 

1. 制作 简单 补 间 

补 间 动 画 只 能 具有 一 个 与 之 关联 的 对 象 实例 ， 并 使 用 属性 关键 帧 而 不 是 关键 帧 ， 这 是 
Flash 中 比较 常用 的 动画 类 型 。 

创建 补 间 动画 的 方法 有 以 下 两 种 。 

(1) 在 【时 间 轴 】 面 板 中 创建 。 用 鼠标 选取 要 创建 动画 的 关键 帧 后 右 击 ， 在 弹出 的 快捷 菜 
单 中 选择 【创建 补 间 动 画 】 命 令 ， 即 可 快速 地 完成 补 间 动 画 的 创建 ， 如 图 25-41 所 示 。 

(2) 在 命令 菜单 中 创建 。 选 取 要 创建 动画 的 关键 帧 后 ， 选 择 【 插 入 】 一 【 补 间 动画 】 菜 单 
命令 ， 同 样 也 可 以 创建 补 间 动 画 ， 如 图 25-42 所 示 。 


IGG 


修改 (M) 文本 (T) 命令 { 


25-41 选择 【创建 补 间 动 画 】 命 令 图 25-42 ”选择 【 补 间 动 画 】 菜 单 命令 
2. 制作 多 种 渐变 运动 
下 面 制作 一 个 由 小 变 大 的 淡 入 动画 ， 有 具体 操作 步骤 如 下 。 
EEC 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 弹 出 【新 建文 档 】 对 话 框 ， 选 择 【 常 规 】 
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选项 卡 中 的 ActionScript 3.0 选项 ， 单 击 【确定 】 按 钮 ， 新 建 一 个 文档 ， 如 图 25-43 
所 示 。 

EEJPy 选择 【文件 】 一 【导入 】 一 【导入 到 有 舞台】 菜单 命令 ， 弹 出 【导入 】 对 话 框 ， 
单 击 随 书 光盘 中 的 素材 “汽车 .gif”， 如 图 25-44 所 示 。 


25-43 【新 建文 档 】 对 话 框 25-44 【导入 】 对 话 框 


EEC) 单 击 【 打 开 】 按钮 ， 将 图 片 导入 到 有 舞台 ， 如 图 25-45 所 示 。 

ER 选中 导入 的 图 片 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【转换 为 元 件 】 菜 单 命 令 ， 
弹出 【转换 为 元 件 】 对 话 框 ， 在 【类 型 】 下 拉 列 表 框 中 选择 【图 形 】 选 项 ， 单 击 
【 确定】 按钮 ， 如 图 25-46 所 示 。 
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25-45 ”导入 到 舞台 25-46 【转换 为 元 件 】 对 话 框 


本 于 BY 选择 第 1 帧 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【创建 补 问 动画 】 命 令 ， 然 后 将 
动画 的 终点 调整 到 时 间 轴 的 第 24 帧 (将 光标 放 在 动画 持续 的 最 后 一 帧 ， 光 标 变 成 对 
形状 后 ， 拖 忠 到 第 24 帧 )， 如 图 25-47 所 示 。 

单 击 第 24 帧 ， 将 舞台 上 的 实例 从 第 1 帧 的 位 置 向 右 下 方 拖 点 ， 如 图 25-48 所 示 。 

EC 单 击 【时 间 轴 】 面 板 下 方 的 【绘图 纸 外 观 】 按 钮 ， 显 示 所 有 帧 的 “绘图 纸 ”。 
选中 第 1 帧 ， 再 选择 工具 箱 中 的 【缩放 工具 】， 将 舞台 上 的 实例 缩小 ， 如 图 25-49 
所 示 。 


图 25-47 创建 补 间 动 画 图 25-48 移动 素材 位 置 


四 BY 选择 第 1 帧 的 实例 ， 然 后 在 【属性 】 面 板 的 【色彩 效果 】 选 项 组 的 【样式 】 下 
拉 列 表 框 中 选择 Alpha 选项 ， 并 调整 Alpha 值 为 20%， 如 图 25-50 所 示 。 


[clelx] 一 一 


下 


图 25-49 缩小 素材 图 片 图 25-50 【属性 】 面 板 


EECRD) 至 此 就 完成 了 动画 的 制作 ， 按 Ctrl+Enter 组 合 键 即 可 演示 动画 效果 ， 如 图 25-51 
所 示 。 


图 25-51 演示 动画 效果 
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25.3.4 制作 传统 补 间 动 画 


传统 补 间 与 补 间 动 画 类 似 ， 只 是 前 者 的 创建 过 程 比较 复杂 ， 并 且 可 以 实现 通过 补 间 动 画 
无 法 实现 的 动画 效果 。 在 传统 补 间 中 ， 只 有 关键 帧 是 可 编辑 的 ， 只 可 以 查看 补 间 帧 ， 但 无 法 
直接 编辑 它们 。 传 统 补 间 动 画 的 插 补 帧 显示 为 浅 蓝 色 ， 并 会 在 关键 帧 之 间 绘制 一 个 箭头 。 

制作 行驶 的 救护 车 动画 的 具体 步骤 如 下 。 

EC 新 建 一 个 空白 文档 ， 选 择 工 具 箱 中 的 【文本 工具 】， 在 舞台 上 输入 字母 hb， 在 

【属性 】 面 板 的 【字符 】 选 项 组 的 【系列 】 下 拉 列 表 框 中 选择 Webdings 选项 ， 并 将 
颜色 设 为 绿色 ,字母 h 就 变 成 了 “救护 车 ”形状 ， 如 图 25-52 所 示 。 

ED 调整 图 形 的 位 置 ， 并 选择 工具 箱 中 的 【任意 变形 工具 】， 调 整 图 形 的 大 小 ， 如 

图 25-53 所 示 。 
葬 于 BY 选中 【图 层 1】 的 第 20 帧 ， 按 F6 键 插入 关键 帧 ， 如 图 25-54 所 示 。 


| tha 
图 25-52 绘制 形状 图 25-53 ”调整 形状 大 小 图 25-54 插入 关键 帧 
本 ZY 将 舞台 上 的 图 形 移动 到 左 侧 的 位 置 ， 如 图 25-55 所 示 。 
ES 选中 【图 层 1】 的 第 1 帧 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【创建 传统 补 间 】 命 
令 。 至 此 就 完成 了 动画 的 制作 ， 如 图 25-56 所 示 。 
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图 25-55 移动 图 形 图 25-56 ”创建 传统 补 间 动画 


25.4” 跟 我 练 练 手 
25.4.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
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25.4.2 上 机 练习 


练习 1: 了 解 Flash CS6 的 工作 界面 。 
练习 2: 认识 Flash CS6 的 图 层 与 时 间 轴 。 
练习 3: 制作 常用 的 简单 动画 。 


25.5 高 手 甜 点 


甜点 1: 获得 最 佳 补 间 形 状 动画 效果 


获得 最 佳 补 间 形状 动画 效果 的 方法 如 下 。 

CD 在 复杂 的 补 间 形状 中 ， 需 要 创建 中 间 形 状 ， 然 后 再 进行 补 间 ， 而 不 要 只 定义 起 始 和 结 
东 的 形状 。 

(2) 确保 形状 提示 是 符合 逻辑 的 。 

G) 如 果 按 逆 时 针 顺序 从 形状 的 左上 角 开始 放置 形状 提示 ， 它 们 的 工作 效果 最 好 。 

甜点 2: 如 何 批量 导出 .fla 文件 


单 击 【 批 量 导出 】 按 钮 ， 弹 出 【批量 导出 】 对 话 框 ， 从 中 可 以 添加 文件 及 文件 夹 ( 按 Ctl+B 
组 合 键 也 可 以 弹出 【批量 导出 】 对 话 框 )， 进 行 批量 导出 。 
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Logo 是 指 站 点 中 使 用 的 标志 或 者 徽标 ， 用 来 传达 站 点 、 公 
是 指 居于 网 页 头 部 ， 用 来 展示 站 点 主要 宣传 内 容 、 站 点 形象 或 者 广告 内 容 的 部 分 ， 


Banner 部 分 的 大 小 并 不 国定 。 本 章 高 
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就 来 介绍 制作 动态 网 站 Logo 与 Banner 的 实例 。 
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26.1 制作 滚动 文字 Logo 
制作 滚动 文字 Logo 的 过 程 如 下 。 
26.1.1 设置 文档 属性 


设置 文档 属性 的 具体 操作 步骤 如 下 。 

EEJDp 在 Flash CS6 操作 界面 中 选择 【文件 】 一 【新 建 】 菜 单 命令 ， 打 开 【 新 建文 档 】 
对 话 框 ， 在 【常规 】 选 项 卡 中 设置 文档 的 参数 ， 如 图 26-1 所 示 。 

EEJ2y 单 击 【 确 定 】 按 钮 ， 即 可 新 建 一 个 空白 文档 ， 如 图 26-2 所 示 。 


图 26-1 【新 建文 档 】 对 话 框 图 26-2 ”空白 文档 


区 于 E> 选择 【修改 】 一 【文档 】 菜 单 命令 ， 打 开 【 文 档 设置 】 对 话 框 ， 在 其 中 设置 文 
档 的 尺寸 ， 如 图 26-3 所 示 。 

EEC 设置 完毕 后 ， 单 击 【确定 】 按 钮 ， 即 可 看 到 设置 文档 属性 后 的 显示 效果 ， 如 
图 26-4 所 示 。 


26-3 【文档 设置 】 对 话 框 图 26-4 修改 后 的 空白 文档 


26.1.2 制作 文字 元 件 


制作 文字 元 件 的 具体 操作 步骤 如 下 。 

ECGRD) 选择 【插入 】 一 【新 建 元 件 】 菜 单 命令 ， 打 开 【 创 建新 元 件 】 对 话 框 ， 在 【名 
称 】 文 本 框 中 输入 【文本 】， 并 选择 【类 型 】 为 【图 形 】， 如 图 26-5 所 示 。 

EUPp 单 击 【 确 定 】 按 钮 ， 进 入 文本 编辑 状态 当中 ， 如 图 26-6 所 示 。 


图 26-5 【创建 新 元 件 】 对 话 框 图 26-6 文本 编辑 状态 
ECEDBp 选择 工具 箱 中 的 【文本 工具 】， 然 后 选择 【窗口 】 一 【属性 】 菜 单 命令 ， 打 开 
【属性 】 面 板 ， 在 其 中 设置 文本 的 属性 ， 具 体 的 参数 设置 如 图 26-7 所 示 。 


EC 单 击 【 属 性 】 面 板 中 的 【关闭 】 按 钮 ， 返 回 到 文本 编辑 状态 当中 ， 在 其 中 输入 
文字 ， 如 图 26-8 所 示 。 
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【属性 】 面 板 
26.1.3 ”制作 滚动 效果 


制作 文字 滚动 效果 的 具体 操作 步骤 如 下 。 

EEJDp 单 击 【场景 1】， 进 入 场景 当中 。 然 后 选择 【窗口 】 一 【 库 】 菜 单 命令 ， 将 
【 库 】 面 板 中 的 元 件 拖 奥 到 场景 当中 ， 如 图 26-9 所 示 。 

EC 在 【时 间 轴 】 面 板 中 右 击 第 20 帧 ， 在 弹出 的 快捷 菜单 中 选择 【插入 关键 帧 】 命 
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图 26-8 输入 文字 
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令 ， 插 入 关键 帧 ， 如 图 26-10 所 示 。 
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图 26-9 拖 忠 元 件 图 26-10 ”插入 关键 帧 


TE> 选择 【图 层 1】 当 中 的 第 1 帧 ， 然 后 选择 【窗口 】 一 【属性 】 菜单 命令 ， 打 开 
【属性 】 面 板 ， 在 其 中 设置 相关 参数 ， 如 图 26-11 所 示 。 

GED》 设置 完毕 后 ， 返 回 到 Flash CS6 窗口 当中 ， 在 【时 间 轴 】 面板 中 选择 第 1 帧 到 第 
20 帧 之 间 的 任意 一 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【创建 传统 补 间 】 命 令 ， 创 
建 传统 补 间 动画 ， 如 图 26-12 所 示 。 
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图 26-11 【属性 】 面 板 图 26-12 创建 传统 补 间 动 画 


四 于 BY 选中 第 20 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【复制 帧 】 命 令 ， 即 可 复制 第 20 
帧 的 内 容 ， 如 图 26-13 所 示 。 

ED 单 击 【 时 间 轴 】 面 板 中 的 【新 建 图 层 】 按 钮 ， 新 建 一 个 图 层 。 选 中 第 1 帧 并 右 

击 ， 在 弹出 的 快捷 菜单 中 选择 【粘贴 帧 】 命 令 ， 粘 贴 复 制 的 帧 ， 如 图 26-14 所 示 。 

EEC 选中 【图 民 2】， 在 【图 层 2】 的 第 20 帧 处 右 击 ， 在 弹出 的 快捷 菜单 中 选择 
【插入 关键 帧 】 命 令 ， 插 入 一 个 关键 帧 ， 如 图 26-15 所 示 。 

EEJD) 选择 工具 箱 中 的 【自由 变换 工具 】， 对 场景 中 【图 层 2】 的 第 20 帧 处 的 图 形 做 
自由 变换 ， 有 具体 的 参数 在 【属性 】 面 板 中 可 以 设置 ， 如 图 26-16 所 示 。 
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26-15 ”插入 关键 帧 


图 26-16 【属性 】 面板 


EEJD) 设置 完毕 后 ， 返 回 到 Flash CS6 窗口 当中 ， 在 【时 间 轴 】 面板 中 选择 【图 层 2】 
的 第 1 帧 到 第 20 帧 之 间 的 任意 一 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【创建 传统 补 
间 】 命 令 ， 创 建 传 统 补 间 动 画 ， 如 图 26-17 所 示 。 


26-17 ”创建 传统 补 间 动 画 
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26-18 ”预览 动画 
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26.2 ”制作 动态 产品 Banner 


网 页 中 除了 文字 Logo 外 ， 常 常 还 会 放置 动态 Banner， 来 吸引 浏览 者 的 眼球 。 本 节 就 来 制 
作 一 个 产品 Banner。 


26.2.1 制作 文字 动画 


制作 文字 动画 的 具体 操作 步骤 如 下 。 

EC) 在 Flash CS6 操作 界面 中 新 建 一 个 空白 文档 。 双 击 【 图 层 1】 名 称 ， 将 其 更 名 为 
“文字 ”， 如 图 26-19 所 示 。 

四 TY 选择 工具 箱 中 的 【文本 工具 】 国 ,在 【属性 】 面 板 中 设置 文本 类 型 为 【 静 
态 文本 】， 字 体 为 Arial Black， 字 体 大 小 为 50 点 ， 颜 色 为 红色 ， 如 图 26-20 所 示 。 


5 卉 04 像 类 种 并 保守 
入: [和 


有 人 要 二 相应 | 


26-20 【属性 】 面 板 


图 26-19 【时 间 轴 】 面板 
EEIey 在 舞台 中 间 位 置 输入 文字 MM， 选 择 【 修 改 】 一 【转换 为 元 件 】 菜 单 命令 ， 弹 
出 【转换 为 元 件 】 对 话 框 ， 设 置 元 件 【 类 型 】 为 【图 形 】， 如 图 26-21 所 示 。 
EC 单 击 【 确 定 】 按 钮 ， 即 可 将 文字 转换 为 图 形 ， 如 图 26-22 所 示 。 


【转换 为 元 件 】 对 话 框 26-22 ”文字 变 为 图 形 


图 26-21 
EECIRD 选中 【文字 】 图 层 的 第 10 帧 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【插入 关键 帧 】 


命令 ， 如 图 26-23 所 示 。 
EC 选中 第 1 帧 ， 将 舞台 上 的 文字 MM 垂直 向 上 移动 到 舞台 的 上 方 (使 其 刚 出 舞 


台 )， 然 后 选中 第 1 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【创建 传统 补 间 】 命 令 ， 如 
图 26-24 所 示 。 
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图 26-23 插入 关键 帧 图 26-24 创建 传统 补 间 


ED 选择 文字 图 层 的 第 1 帧 ， 然 后 选择 文字 MM， 打 开 【 属 性 】 面 板 ， 在 【色彩 效 
果 】 选 项 组 的 【样式 】 下 拉 列 表 框 中 选择 Alpha 选项 ， 设 置 Alpha 值 为 0。 如 图 26-25 
所 示 。 

EEC) 选择 第 49 帧 ， 按 F5 键 插入 帧 ， 使 动画 延续 到 第 49 帧 ， 如 图 26-26 所 示 。 


EE 
CT 


图 26-25 【属性 】 面板 图 26-26 ”延续 动画 帧 


葬 于 BY 新 建 一 个 图 层 ， 并 命名 为 “文字 -1”， 然 后 单 击 第 10 帧 ， 按 F7 键 插入 空白 关 
键 帧 ， 如 图 26-27 所 示 。 

EC 选择 工具 箱 中 的 【文本 工具 】 国 ， 在 【属性 】 面 板 中 设置 其 文本 类 型 为 【静态 
文本 】， 字 体 为 Arial， 字 体 大 小 为 30， 颜 色 为 黑色 ， 如 图 26-28 所 示 。 


Fe 4 二 : 国 恒 国 国 


图 26-27 插入 空白 关键 帧 图 26-28 设置 文本 属性 


网 页 设计 与 网 站 建设 
案例 课堂 >… 


DY 在 舞台 上 输入 文字 SU， 并 在 文字 的 下 方位 置 再 次 输入 文字 SU， 颜 色 设置 为 灰色 ， 
如 图 26-29 所 示 。 

EEIP9 选中 输入 的 文字 ， 选 择 【 修 改 】 一 【转换 为 元 件 】 菜 单 命令 ， 将 输入 的 文字 转 
换 为 图 形 元 件 ， 如 图 26-30 所 示 。 


.Ee | 
a [BE | 增 : 训 [ea 


文件 夹 : 诛 根 目录 
高 > 


图 26-29 输入 文字 图 26-30 【转换 为 元 件 】 对 话 框 
26.2.2 ”制作 文字 遮 淖 动画 


| | 制作 文字 谈 单 动画 的 具体 操作 步骤 如 下 。 
| ECEIRDp 选择 【文字 -1】 图 层 的 第 15 帧 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【转换 为 关键 
帧 】 命 令 ， 将 其 和 文字 MM 的 左边 对 齐 ; 然后 选择 第 10 帧 ， 右 击 ， 在 弹出 的 快捷 
菜单 中 选择 【创建 传统 补 间 】 命 令 ， 接 着 选择 第 49 帧 ， 按 F5 键 插入 帧 。 如 图 26-31 
所 示 。 
EEC 新 建 一 个 图 层 ， 并 命名 为 “ 遗 音 1”， 选 择 第 1 帧 ， 并 选择 工具 箱 中 的 矩形 工 
具 ， 在 舞台 上 绘制 一 个 矩形 ， 放 在 SU 文字 的 左 侧 ， 如 图 26-32 所 示 。 


上 由 
\ 攻 过 Ee 
by | 
3 suMM 
4 | 
图 26-31 插入 帧 图 26-32 ”绘制 矩形 
EEIep 右 击 【这 单 1】 图 层 ， 在 弹出 的 快捷 菜单 中 选择 【 遮 界 层 】 命 令 ， 如 图 26-33 
所 示 。 


同 理 ， 制 作出 文字 MM 右 侧 ERROOM 文字 的 遮 单 动画 ， 如 图 26-34 所 示 。 
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图 26-33 ”创建 遮 淖 层 图 26-34 制作 其 他 文字 的 遮 单 


26.2.3 制作 图 片 动画 


制作 图 片 动画 的 操作 步骤 如 下 。 

EEC 选择 【文件 】 一 【导入 到 库 】 菜 单 命令 ,打开 【导入 到 库 】 对 话 框 ， 在 其 中 选 
择 需要 导入 到 库 的 图 片 ， 如 图 26-35 所 示 。 

EERP) 单 击 【 打 开 】 按钮 ， 即 可 将 图 片 导入 到 库 之 中 ， 如 图 26-36 所 示 。 


26-35 【导入 到 库 】 对 话 框 图 26-36 【 库 】 面板 


EC) 新 建 一 个 图 层 ， 将 其 命名 为 “图 片 1”， 选 中 第 27 帧 ， 右 击 ， 按 F7 键 插入 空白 
关键 帧 ， 将 库 中 的 “1” 图 片 拖 到 舞台 上 ， 并 调整 其 大 小 和 位 置 ， 然 后 选择 【修改 】 一 
【转换 为 元 件 】 菜 单 命令 ， 将 图 片 转换 为 图 形 元 件 ， 如 图 26-37 所 示 。 

EC 选中 第 32 帧 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【转换 为 关键 帧 】 命 令 ， 然 后 选 
择 第 27 帧 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【创建 补 间 动 画 】 命 令 ， 接 着 选择 第 
49 帧 ， 如 图 26-38 所 示 。 
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案例 课堂 9 一 
CTT EE 
ee : 
| Rl 
suUMMERRooM EU EE ts uew x 国 | 
图 26-37 添加 图 片 图 26-38 创建 补 间 动 画 


EEID) 单 击 【图 片 1】 图 层 的 第 27 帧 ， 在 舞台 上 选中 图 片 “1”， 打 开 【 属 性 】 面 板 ， 
在 【色彩 样式 】 选 项 组 的 【样式 】 下 拉 列 表 框 中 选择 Alpha 选项 ， 设 置 Alpha 值 为 
0， 如 图 26-39 所 示 。 

图 片 最 后 的 显示 效果 如 图 26-40 所 示 。 


RE 
| = 
实例 : 元 件 + ER 
| 位 置 和 大 小 


% a7320 


本 
坑 。 :000 过: 10900 


| 到 入 称 效 果 
样式 : LAlpha i 
Alpha; OF 0 ]% - 
| 本 环 
< 二 I 
第 一 帖 : [1 ® 人 
省 
本 SUMIMERRoow 
26-39 【属性 】 面 板 26-40 图 片 显示 效果 


EEC 同 理 ， 创 建 另 外 两 张 图 片 的 动画 效果 ， 如 图 26-41 所 示 。 
EE 了 RD) 按 Ctrl+Enter 组 合 键 ， 即 可 预览 动画 效果 ， 如 图 26-42 所 示 。 


DO 再 可 D) 


多 SUMIMERRoow 
suUMIMIERRoow | 王 下 
Ey Wf 
和 到 
图 26-41 添加 其 他 图 片 图 26-42 预览 动画 
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26.3” 跟 我 练 练 手 


26.3.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 


26.3.2 上 机 练习 


练习 1: 制作 滚动 文字 Logo。 
练习 2: 制作 产品 Banner。 


26.4 高 手 甜 点 


甜点 1: 如 何 使 网 页 Banner 更 具 吸 引力 


(1) 使 用 简单 的 背景 和 文字 。 制 作 时 注意 构图 要 简单 ， 颜 色 要 醒目 ， 角 度 要 明显 ， 对 比 要 
强烈 。 

(2) 巧妙 地 使 用 文字 ， 使 文本 和 Banner 中 的 其 他 元 素 有 机 地 结合 起 来 ， 充 分 利用 字体 的 
样式 、 形 状 、 粗 细 、 颜 色 等 来 补充 和 加 强 图 片 的 力量 。 

(3) 使 用 深 色 的 外 围 边框 ， 因 为 在 站 点 中 应 用 Banner 时 ， 大 都 不 为 Banner 添加 轮廓 。 如 
果 Banner 的 内 容 都 集中 在 中 央 ， 那 么 边缘 就 会 过 于 空白 。 如 果 没 有 边框 ，Banner 就 会 和 页 面 
融 为 一 体 ， 从 而 降低 Banner 的 注目 率 。 


甜点 2: 如 何 快速 选择 文本 工具 


有 时 为 了 在 舞台 上 添加 文本 ， 需 要 使 用 文本 工具 ， 虽 然 可 以 通过 单 击 工具 箱 中 的 【文本 
工具 】 按 钮 进行 选择 ， 但 是 直接 按 T 键 却 可 以 快速 选择 文本 工具 。 


53@ 


4 人 
第 7 篇 
网 站 开发 实战 篇 


和 第 27 章 娱乐 休闲 类 网 站 开发 实战 
和 a 第 28 章 电子 商务 类 网 站 开发 实战 
和 a 第 29 章 适合 手机 预览 的 网 站 开发 实战 


加 站 汪 


。 通 过 本 章 


娱乐 休闲 类 网 页 类 型 较 多 ， 结 合 主题 内 容 不 同 ， 所 设计 的 网 页 风格 差异 很 大 ， 


如 聊天 交友 、 星 座 运程 、 游 戏 视频 等 。 本 章 主 要 以 电影 网 为 例 进 行 介绍 


的 学 习 ， 读 者 能 够 掌握 娱乐 休闲 类 网 站 的 制作 技巧 与 方法 。 
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网 页 设计 与 网 站 建设 
案例 课 沉思 ~ 


27.1 网 站 分 析 及 准备 工作 


本 章 通过 介绍 电影 网 网 站 建设 认识 娱乐 休闲 类 网 站 的 制作 开发 。 首 先 需 要 进行 网 站 分 析 
及 准备 工作 。 


27.1.1 设计 分 析 

休闲 娱乐 网 站 要 注重 图 文 混 排 的 效果 。 实 践 证 明 ， 只 有 文字 的 页 面 用 户 停 留 的 时 间 相 对 
较 短 ， 如 果 完全 是 图 片 ， 又 不 能 概括 信息 的 内 容 ， 用 户 看 着 不 明白 ， 使 用 图 文 混 排 的 方式 是 
比较 恰当 的 。 另 外 一 点 ， 休 闲 娱 乐 类 网 站 要 注意 引用 会 员 注 册 机 制 ， 这 样 可 以 积累 一 些 忠 实 
的 用 户 群体 ， 有 利于 网 站 的 可 持续 性 发 展 。 
27.1.2 ”网 站 流程 图 


在 制作 网 站 之 前 ， 需 要 先 设 计 网 站 的 流程 图 。 下 面 给 出 娱乐 休闲 类 网 站 的 设计 流程 图 ， 
如 图 27-1 所 示 。 


休闲 娱乐 类 网 站 


27-1 网 站 流程 图 


通过 上 面 的 流程 图 可 以 看 到 ， 不 管 栏目 名 称 是 什么 ， 都 可 以 使 用 列表 页 和 内 容 页 进行 表 
达 ， 在 后 台 管 理 中 我 们 使 用 同一 内 容 添 加 页 和 内 容 维护 页 进行 管理 。 
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27.1.3 数据库 分 析 


1. MySQL 数据 库 的 导入 


将 本 章 范 例文 件 夹 中 的 “ 源 文件 ch27” 目 录 整 个 复制 到 C:\Apache2.2\htdocs 里 ， 就 可 以 
开始 进行 网 站 的 规划 。 

在 该 目录 中 有 本 章 范 例 所 使 用 的 数据 库 备 份 文件 db_16.sql， 将 其 导入 ， 其 中 包含 了 三 个 
数据 表 : admin、filmclass 和 film。 


2. 数据 表 分 析 
导入 数据 表 之 后 ， 可 以 单 击 数据 表 右 侧 的 【结构 】 链 接 观 看 数据 表 内 容 ， 如 图 27-2 所 示 。 


表 ~ 操作 行 数 2. 
admin ” 国 浏 览 月 结构 号 搜索 著 括 入 锋 清 空 @ 出 除 

i 
filmclass 国 浏 览 用 结构 全 搜索 续 插 入 才 清 裕 @ 删除 7 
3 张 表 总计 41 


27-2 ”数据 表 内 容 


(1) admin 数据 表 。 这 个 数据 表 用 于 保存 登录 管理 界面 的 账号 与 密码 ， 主 索引 栏 为 
usemame 字段 ， 如 图 27-3 所 示 。 


族 将 泪 羊 卉 习 亲 函 弈 读 注 _ 赴 Lz 小 而 六 


名 字 类 型 。 整理 属性 空 默认 颜 外 操作 
用 户 名 Username char(20) gb2312_chinese_ci 否 必修 改 
密码 passwd char(20) gb2312 chinese ci 否 7 修改 


27-3 _ admin 数据 表 


目前 已 经 预存 一 条 数据 在 数据 表 中 ， 如 图 27-4 所 示 ， 值 都 为 username passwd 
admin， 为 默认 使 用 的 账号 及 密码 。 admn dnin 
(2) filmClass 数据 表 。 这 个 数据 表 主 要 用 于 保存 电影 分 类 信息 。 本 数 图 27-4 ”账户 与 密码 
据 表 以 class id( 电 影 类 别管 理 编号 ) 为 主 索 引 ， 并 设 定 为 UNSIGNED( 正 
数 )、auto_increment( 自 动 编号 )， 如 此 即 能 在 添加 数据 时 为 每 一 个 类 别 加 上 一 个 单独 的 编号 而 
不 重复 ， 如 图 27-5 所 示 。 


名 字 类 型 整理 属性。 空 默认 
编号 class id smallint(5) UNsiGNsD 否 无 
二 ne 

classnum smallint(5) 否 0 


27-5 filmClass 数据 表 


(3) fm 数据 表 。 这 个 数据 表 主 要 用 于 保存 电影 信息 。 本 数据 表 以 fim id( 网 站 电影 信息 
管理 编号 ) 为 主 索引 ， 并 设 定 为 UNSIGNED( 正 数 )、auto_increment( 自 动 编号 )， 如 此 即 能 在 添 


se 


网 页 设计 与 网 站 建设 


案例 课堂 罗 一 


加 数据 时 为 每 一 部 电影 加 上 一 个 单独 的 编号 而 不 重复 ， 如 图 27-6 所 示 。 


名 字 类型 整理 展 性 ” 空 上 默认 
fillm_id smallint(5) usicNso 否 无 
film_time datetime 否 0000 
film_title varchar(100) gb2312_chinese_ci 否 
film_gype varchar(100) gb2312_chinese _ci 否 无 
film_editor varchar(100) gb2312_chinese_ci 否 
film_photo varcharl100) gb2312_chinese _ci 否 
istop Smallint(5) 否 0 
isnew smallint(5) 否 0 
film_country smallint(5) 是 0 
film_Url varchar(100) gb2312_chinese_ci 否 
film_content lext gb2312_chinese_ci 否 无 
图 27-6 flm 数据 表 
27.1.4 制作 程序 基本 数据 表 
本 章 范 例 网 站 的 制作 程序 基本 数据 表 如 表 27-1 所 示 。 
表 27-1 制作 程序 基本 数据 表 
信息 名 称 内 容 

网 站 名 称 CH16 

本 机 服务 器 主 文件 夹 Ci\Apache?.2\htdocs\ch16 

程序 使 用 文件 夹 Ci\Apache?2.2\htdocs\ch16 

程序 测试 网 址 http://localhost/ ch16/ 

MySQL 服务 器 地 址 localhost 

管理 账号 /密码 root/root 

使 用 数据 库 名 称 Db 16 

使 用 数据 表 名 称 admin、filmclass、film 


到 此 所 有 的 前 置 作业 与 准备 工作 已 经 告 一 段落 ， 接 下 来 我 们 先 分 析 网 站 的 结构 。 


27.2 网 站 结构 分 析 


网 站 首页 使 用 1-2-1 型 结构 进行 布局 ， 主 要 包括 导航 、 资 讯 中 心 及 下 方 的 页 脚 。 
如 图 27-7 所 示 。 
二 级 页 面 只 有 一 个 ， 使 用 1-2-1 型 结构 进行 布局 ， 如 图 27-8 所 示 。 


效果 
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证 


达 将 水 忆 民 习 状 下 认 总 注册 7 小 站 


图 27-7 网 站 首页 效果 图 27-8 ”二 级 页 面 效果 图 
接 下 来 ， 就 要 打开 Dreamweaver CS6， 完 成 我 们 的 娱乐 休闲 类 网 站 制作 。 


27.3 ”网 站 主页 面 的 制作 
-个 网 站 的 首页 也 被 称 为 主页 ， 下 面 介绍 网 站 主页 面 的 制作 。 
27.3.1 ”管理 站 点 


按照 表 27-1 来 定义 新 建 的 站 点 ， 进 入 Dreamweaver CS6 后 选择 【站 点 】 一 【管理 站 点 】 
菜单 命令 ,创建 用 于 存放 网 站 内 容 的 站 点 ， 这 里 不 再 详 述 。 


27.3.2 ”网 站 主页 面 的 制作 过 程 


下 面 针对 页 面 制作 过 程 中 的 步骤 和 数据 绑 定 进行 讲解 。 

1. 数据 库 连 接 的 设置 

在 【文件 】 面 板 中 选择 要 编辑 的 网 页 index.php， 双 击 
将 其 在 编辑 区 打开 。 接 着 切换 到 【数据 库 】 面 板 。 单 击 
【+】 按 钮 ， 在 弹出 的 菜单 中 选择 【MySQL 连接 】 命 令 ， 在 
打开 的 【MySQL 连接 】 对 话 框 中 输入 连接 的 名 称 和 MySQL 
的 连接 信息 ， 单 击 【确定 】 按 钮 ， 如 图 27-9 所 示 。 


2. 模块 化 处 理 网 站 顶部 与 底部 


制作 本 章 实例 时 ， 我 们 仍然 使 用 模块 化 结构 思想 ， 把 多 个 页 面 共 用 的 部 分 单独 抽出 来 ， 形 成 
多 个 单独 页 面 ， 在 需要 使 用 的 地 方 ， 引 入 一 下 就 行 了 。 可 以 先 看 一 下 27.6 节 的 成 品 预览 ， 在 本 实 
例 中 有 两 个 地 方 可 以 进行 单独 抽出 ， 分 别 是 顶部 导航 (topphp)、 网 站 底部 (foot.php)。top.php、 
footphp 这 两 个 部 分 因为 不 涉及 动态 调用 ， 在 制作 过 程 中 直接 从 页 面 中 抽出 即 可 。 
@3 在 导航 区 本 章 使 用 文字 进行 链接 ， 而 不 是 从 数据 库 中 的 分 类 中 进行 读 取 ， 这 是 什 
长 么 原因 呢 ， 主 要 是 因为 电影 分 类 相对 比较 国定 ， 不 常 发 生 增 减 。 总 之 ， 在 制作 网 站 的 
”时 候 对 于 哪些 部 分 是 否 需要 动态 化 ， 要 考虑 该 部 分 变化 的 频 度 ， 对 能 静态 化 的 不 要 动态 化 . 
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27-9 ”连接 数据 库 


© 
sr@ 


网 页 设计 与 网 站 建设 
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3. 主要 数据 绑 定 实现 
首页 中 有 9 处 需要 动态 调用 数据 的 地 方 ， 分 别 定义 记录 集 为 : 
新 电影 、 最 新 综艺 、 最 新 动作 、 最 新 动漫 、 最 新 国产 、 最 新 欧美 、 最 新 日 韩 ， 如 图 


所 示 。 


今日 推荐 、 推 荐 图 片 、 最 
2710 


nder, she x 国王 下 ES 
人 四 condio ply tjs shomashjs tp， footplp 


代码 j 拆 分 | 访 计 |。 条 时 视图 哆 .区 .只 p23 到 


27-10 ”数据 绑 定 
1) 今日 推荐 (Recfilmtop) 
在 【 绑 定 】 面 板 中 单 击 打开 Recfilmtop 记录 集 ， 此 记录 集 从 信息 表 中 检索 标记 istop=1 的 


15 条 最 新 信息 ， 如 图 27-11 所 示 。 
设 定 重复 区 域 ， 如 图 27-12 所 示 。 
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Ne 
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27-12 【重复 区 域 】 对 话 框 


27-11 ”Recfilmtop 记录 集 


2) 推荐 图 片 (Recfilmimg) 
Recfilmimg 记录 集 从 信息 表 中 检索 最 新 推荐 的 信息 ， 以 图 片 形式 显示 在 首页 ， 如 图 27-13 


所 示 。 


27-13 ”Recfilmimg 记录 集 
因为 图 片 是 水 平 显 示 ， 应 在 【服务 器 行为 】 面 板 中 选择 DWTeam 一 Horizontal Looper MX 
命令 ， 并 设置 为 1 行 2 列 ， 如 图 27-14 所 示 。 
3) 最 新 电影 (Recfilmnew) 
单 击 打开 Recfilmnew 记录 集 ， 其 目的 是 获取 最 新 的 电影 信息 ， 不 区 分 类 别 ， 但 要 把 综艺 
与 动漫 内 容 排除 ， 如 图 27-15 所 示 。 
设 定 重 复 区 域 记 录 条 数 为 6， 如 图 27-16 所 示 。 
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27-15 ”Recfilmnew 记录 集 27-16 【重复 区 域 】 对 话 框 


4) 最 新 综艺 (Reczongyi)、 最 新 动作 (Recdongzuo)、 最 新 动漫 (Recdongman) 

这 三 个 记录 集 完 成 对 最 新 发 布 的 综艺 信息 、 动 作 电影 信息 、 动 漫 信息 的 检索 ， 都 是 设置 
film type 和 isnew 作为 检索 条 件 ， 只 是 改变 了 一 下 film type 参数 值 。 如 图 27-17 所 示 为 设置 
Reczongyi 记录 集 的 对 话 框 。 

如 图 27-18 所 示 为 设置 最 新 综艺 记录 数 的 【重复 区 域 】 对 话 框 。 


图 27-17 Reczongyi 记录 集 图 27-18 【重复 区 域 】 对 话 框 


5) 最 新 国产 (Recguochan)、 最 新 欧美 (Recoumei)、 最 新 日 韩 (Recrihan) 
这 三 个 记录 集 用 于 检索 最 新 上 传 的 国产 电影 、 欧 美 电 影 、 日 韩 电影 ， 在 记录 集 设置 上 也 
是 一 致 的 ， 设 置 条 件 为 im type 和 film_country， 如 图 27-19 所 示 。 


27-19 ”Recguochan 记录 集 


在 条 件 设置 时 用 1 代表 国产 ，2 代表 欧美 ，3 代表 日 韩 。 因 为 是 以 图 片 形式 显示 ， 于 是 在 
【服务 器 行为 】 面 板 中 选择 DWTeam 一 Horizontal Looper MX 命令 ， 设 置 为 1 行 3 列 ， 如 图 27-20 
所 示 。 
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27-20 设置 图 片 的 排列 方式 


27.4 网 站 二 级 页 面 的 制作 


在 【文件 】 面 板 中 打开 目录 下 的 classphp， 在 列表 中 创建 一 个 获取 所 有 本 类 电影 信息 的 
记录 集 Recfilmclass 和 获取 本 类 电影 推荐 信息 的 Recfilmtop， 如 图 27-21 所 示 。 

class.php 记录 集 设 置 跟 首 页 记录 集 设 置 不 同 ， 首 页 记录 集 设置 是 绑 定 到 某 个 信息 分 类 下 
或 未 指定 分 类 ， 而 class.php 记录 集 需 要 动态 获取 传 过 来 的 参数 film type， 设 定 参 数值 为 
$_ GET[film type]。 
Recfilmtop 记录 集 : 该 记录 集 选取 5 条 本 栏目 下 的 标记 为 推荐 的 信息 ， 如 图 27-22 所 示 。 


IE TFT 


27-21 class.php 界面 27-22 ”Recfilmtop 记录 集 


设 定 重复 记录 ， 指 定 显 示 10 条 记录 ， 如 图 27-23 所 示 。 
Recfilmclass 记录 集 : 该 记录 集 选 取 本 分 类 下 的 所 有 电影 信息 ， 并 以 图 片 方式 分 页 显示 ， 


如 图 27-24 所 示 。 


本 汪 | 


BE jemt awe 
En 


图 27-23 【重复 区 域 】 对 话 框 图 27-24 ”Recfilmclass 记录 集 


在 【服务 器 行为 】 面 板 中 选择 DWTeam 一 Horizontal Looper MX 命令 ， 设 置 为 3 行 3 
列 ， 如 图 27-25 所 示 。 
最 后 插入 记录 集 导 航 条 ， 如 图 27-26 所 示 。 
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27-25 ”Horizontal Looper MX 对 话 框 27-26 ”插入 记录 集 导 航 条 


27.5 网 站 后 台 分 析 与 讨论 


网 站 后 台 管 理 页 面 文件 为 网 站 admin 目录 下 的 index.php， 预 览 效果 如 图 27-27 所 示 。 可 
以 看 出 在 后 台 管 理 页 面 中 ， 管 理 员 可 以 进行 增加 影片 类 别 、 管 理 影片 类 别 、 增 加 影片 信息 、 
管理 影片 信息 等 操作 。 


全 再 当 管理 后 台 首页 


“Sha 次 迎 使 用 后 台 管 理 功能 


区 2 后 台 管 


ADMIN 


素 关 由 沁 中 瑟 煌 亚 祥 沪 泪 志江 扯 


27-27 ”后台 管理 界面 


27.6 ”网 站 成 品 预览 


网 站 制作 完成 后 就 可 以 在 浏览 器 中 预览 各 个 页 面 了 ， 有 具体 操作 步骤 如 下 。 

使 用 浏览 器 打开 index.php， 如 图 27-28 所 示 。 
ECD) 单 击 导航 中 的 【动作 片 】 链 接 ， 进 入 信息 列表 页 ， 如 图 27-29 所 示 。 
区 了 BY 单 击 任意 一 条 信息 ， 进 入 信息 内 容 页 ， 如 图 27-30 所 示 。 
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#0 
图 27-28 ”网 站 主页 图 27-29 ”网 站 信息 列表 页 
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27-30 ”信息 内 容 页 
本 了 YY 在 搜索 框 中 输入 关键 字 2012， 如 图 27-31 所 示 。 
电影 网 | ewe 
27-31 输入 关键 字 


单 击 【 搜 索 】 按 钮 ， 搜 索 出 有 关 关 键 字 2012 的 所 有 电影 信息 ， 如 图 27-32 所 示 。 
ECJe 在 IE 地 址 栏 中 输入 http://localhost/ch16/admin/， 再 输入 默认 的 管理 账号 及 密码 
admin， 进 入 管理 界面 ， 如 图 27-33 所 示 。 
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图 27-32 ”搜索 结果 图 27-33 【管理 员 登 录 画 面 】 对 话 框 


EC 单 击 【登录 管理 画面 】 按 钮 ， 进 入 后 台 管理 页 面 ， 如 图 27-34 所 示 。 
EC 单 击 左 侧 的 【新 增 影片 类 别 】 链 接 ， 进 入 【新 增 影 片 类 别 】 页 面 ， 如 图 27-35 


所 示 。 
管理 后 各 首页 闲 
后 台 管理 欢 还 便 用 后 和 管理 功能 闫 
仿古 而 ee 条 
名 后 当知 二 2 全 
] 生 司 [EEa 
27-34 ”后 台 管 理 页 面 27-35 【新 增 影片 类 别 】 页 面 


EESRUD 输入 完 各 项 信息 之 后 ， 单 击 【提交 】 按 钮 ， 回 到 【管理 影片 类 别 】 页 面 ， 可 以 
使 用 每 则 信息 旁 的 【编辑 】 及 【删除 】 链 接 来 执行 对 应 操作 ， 如 图 27-36 所 示 。 
EC 单 击 左 侧 的 【新 增 影片 信息 】 链 接 ， 进 入 【新 增 影片 】 页 面 ， 如 图 27-37 所 示 。 
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27-36 【管理 影片 类 别 】 页 面 27-37 【新 增 影片 】 页 面 


EE 输入 各 项 信息 之 后 ， 返 回 【 影 片 管理 】 界 面 ， 可 以 使 用 每 则 信息 旁 的 【编辑 】 
及 【删除 】 链 接 来 执行 对 应 操作 ， 如 图 27-38 所 示 。 
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图 27-38 【影片 管理 】 页面 
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电子 商务 类 网 站 的 开发 主要 包括 网 站 主页 面 制 作 、 网 站 二 级 页 面 制 作 和 网 站 后 
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网 页 设计 与 网 站 建设 
案例 课堂 >… 


28.1 网 站 分 析 及 准备 工作 
在 开发 网 站 之 前 ， 首 先 需 要 分 析 网 站 并 做 一 些 准备 工作 。 
28.1.1 设计 分 析 


电子 商务 类 网 站 一 般 侧重 于 向 用 户 传达 企业 信息 ， 包 括 企 业 的 产品 、 新 闻 资 讯 、 销 售 网 
络 、 联 系 方式 等 ， 让 用 户 快速 了 解 企 业 的 最 新 产品 和 最 新 资讯 。 

本 实例 使 用 红色 为 网 站 主 色调 ， 让 用 户 打 开 页 面 就 会 产生 记忆 识别 。 整 个 页 面 以 产品 、 
资讯 为 重点 ， 舒 适 的 主题 色 加 上 精美 的 产品 图 片 ， 可 以 增强 用 户 的 购买 欲望 。 
28.1.2 ”网 站 流程 图 


本 章 所 制作 的 电子 商务 类 网 站 的 流程 图 如 图 28-1 所 示 。 


电子 商务 类 网 站 
| ! 
首页 企业 新 闻 页 | 产品 展示 页 管理 员 登 录 
新 闻 列 表 | | 新 闻 内 容 | | 新 闻 列表 | | 新 疗 内 容 
下 
- news/index.php | chanpin/index php pe 
index'php adminLogin.php 
时 时 
newsiinewcont.php | chanpin/procont.php 
后 台 管 理 页 面 一 ”adminiindex.php 
后 
全 /| 企业 新 闻 维护 |， aewsadd php、aewsadrinphp、aewsficphp、aewadeLphp 
| 产品 类 别 维护 | classadd.php、 classadmin.php、 classfix.php、 classdel.php 
产品 信息 维护 站 Proadd.php、 proadmin.php、 profix.php、 prodel.php 


图 28-1 网 站 流程 图 
28.1.3 ”数据 库 分 析 


1. MySQL 数据 库 的 导入 


将 本 章 范例 文件 夹 中 的 “ 源 文件 \ch14” 目 录 整 个 复制 到 C:\Apache2.2\htdocs 里 ， 就 可 以 
始 进 行 网 站 的 规划 。 


全 50 


在 该 目录 中 有 本 章 范例 所 使 用 的 数据 库 备份 文件 db_ 14.sql， 将 其 导入 ， 其 中 包含 了 4 个 


数据 表 : admin、news、proclass 和 product。 
2. 数据 表 分 析 


导入 数据 表 之 后 ， 可 以 单 击 数据 表 右 侧 的 【结构 】 链 接 观 看 数据 表 内 容 ， 如 图 28-2 


所 示 。 


表 < 操作 


admin 司 浏 览 鹏 结构 名 搜索 隋 林 入 狗 清 字 @ 删 队 
Lnews | 口 议 妃 缚 构 专 搜索 比 插 入 绿 清 字 人 @ 芭 


proclass 国 浏 鉴 月 结 构 怨 搜索 乳白 入 妇 清 字 @ 出 次 
product 问 浏 览 jr 结构 坊 搜 索 了 插入 妇 清 定 旧 删除 


4 张 表 总计 


28-2 ”分 析 数 据 表 


(1) admin 数据 表 。 这 个 数据 表 主 要 用 于 保存 登录 管理 界面 的 账号 与 密码 ， 主 索引 栏 为 


usemame 字段 ， 如 图 28-3 所 示 。 


目前 数据 表 中 已 经 预存 一 条 数据 ， 如 图 28-4 所 示 ， 值 都 为 admin， 为 默认 使 用 的 账号 及 


密码 。 
名 字 ”类 型 整理 属性 空 黑 认 额外 操作 


用 户 名 ysername char(20) gb2312_chinese_ci 否 Sm 
密码 passwd char(20) gb2312_chinese_ci 否 修改 


28-3 admin 数据 表 


素 将 赴 忆 号 习 冰 开 到 小 四 _ 82 小 


GG 


pp A 


username passwd 
admn admin 


28-4 数据库 账户 


(2) news 数据 表 。 这 个 数据 表 主 要 用 于 保存 企业 新 闻 的 相关 数据 。 本 数据 表 以 news_id( 企 业 
新 闻 管 理 编号 ) 为 主 索引 ， 并 设 定 为 UNSIGNED( 正 数 )、auto_increment( 自 动 编号 )， 如 此 即 
能 在 添加 数据 时 为 每 一 则 企业 新 闻 加 上 一 个 单独 的 编号 而 不 重复 ， 如 图 28-5 所 示 。 


名 字 类 型 整理 
news id smallint(5) 
news time datetime 


news_editor varcharf100) gb2312_chinese_ci 
news_photo varchar(100) gb2312_chinese_ci 
news_top smallint(5) 
news_content text 


gb2312_chinese_ci 


28-5 ”news 数据 表 


属性 空 默认 
UNSIGNED 否 无 


否 0000.0 


newstide varcharf100) gb2312 chinesec 到 


否 
是 NULL 
否 0 
否 无 


(3) proclass 数据 表 。 这 个 数据 表 主要 用 于 保存 产品 分 类 的 相关 数据 。 本 数据 表 以 class_ id( 产 
品类 别管 理 编号 ) 为 主 索引 ， 并 设 定 为 UNSIGNED( 正 数 )、auto_increment( 自 动 编号 )， 如 此 即 
能 在 添加 数据 时 为 每 一 个 产品 类 别 加 上 一 个 单独 的 编号 而 不 重复 ， 如 图 28-6 所 示 。 
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名 字 类型 整理 属性 空 默认 
编号 class id smallint(5) UNSIGNED 否 无 
类 别名 称 classname varchar[100) gb2312_chinese_ci 否 
排序 和 classnum smallint(5) 否 0 


图 28-6 ”proclass 数据 表 
(4) product 数据 表 。 这 个 数据 表 主 要 用 于 保存 产品 的 相关 数据 。 本 数据 表 以 pro_id( 企 业 
产品 管理 编号 ) 为 主 索引 ， 并 设 定 为 UNSIGNED( 正 数 )、auto_increment( 自 动 编号 )， 如 此 即 
能 在 添加 数据 时 为 每 一 款 产品 加 上 一 个 单独 的 编号 而 不 重复 ， 如 图 28-7 所 示 。 


名 字 类 型 整理 属性 空 默认 
proid smallint(5) VNBGNED 各 无 
pro_time datetime 否 0000 
pro_type varchar(20) gb2312_chinese_ci 否 
pro_name varchar(100) gb2312_chinese_ci 否 
pro_photo varchar(100) gb2312_chinese_ci 否 
pro_editor ~ varchar(100) gb2312_chinese_ci 否 
pro_content text gb2312_chinese_ci 否 无 
pro_top smallint(5) 否 0 


图 28-7 product 数据 表 


28.1.4 制作 程序 基本 数据 表 
本 章 范例 网 站 的 基本 数据 表 如 表 28-1 所 示 。 
表 28-1 网 站 基本 数据 表 


信息 名 称 内 容 
网 站 名 称 CHI8 
本 机 服务 器 主 文件 夹 Ci\Apache?2.2\htdocs\ch18 
程序 使 用 文件 夹 C:\Apache2.2\htdocs\ch18 
程序 测试 网 址 http://localhost/ch18/ 
MySQL 服务 器 地 址 localhost 
管理 账号 /密码 root/root 
使 用 数据 库 名 称 Db 14 
使 用 数据 表 名 称 admin、news、proclass、product 


28.2 ”网 站 结构 分 析 


网 站 首页 使 用 1-(1+2)-1 型 结构 进行 布局 ， 凸 显 网 站 的 大 气 。 整 个 页 面 非常 简洁 明了 ， 主 
要 包括 导航 、banner、 产 品 展示 、 企 业 新 闻 、 促 销 信 息 及 下 方 的 页 脚 ， 如 图 28-8 所 示 。 


二 
令 582 


局 


二 级 页 面 有 多 个 ， 只 有 企业 新 闻 列 表 页 和 企业 产品 展示 列表 页 需要 使 用 动态 方法 实现 ， 
这 两 个 页 面 使 用 1-2-1 型 结构 进行 布局 (在 实际 网 站 制作 中 ， 通 常设 计 者 把 变化 不 大 的 页 面 保 
持 静 态 化 ， 仅 对 经 常 更 新 的 页 面 进行 编程 处 理 )， 如 图 28-9 所 示 。 
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图 28-8 网 站 首页 图 28-9 二 级 页 面 


GG 


28.3 ”网 站 主页 面 的 制作 


网 站 的 分 析 以 及 准备 工作 都 做 好 之 后 ， 下 面 就 可 以 正式 进行 网 站 的 制作 了 ， 这 里 以 在 
Dreamweaver CS6 中 制作 为 例 进行 介绍 。 


28.3.1 ”管理 站 点 


制作 网 站 的 第 一 步 工作 就 是 创建 站 点 ， 在 Dreamweaver CS6 中 创建 站 点 的 方法 在 前 面 的 
章节 中 已 经 介绍 ， 这 里 不 再 袭 述 。 


28.3.2 ”网 站 主页 面 的 制作 过 程 
下 面 针对 页 面 制作 过 程 中 的 步骤 和 数据 绑 定 进行 讲解。 
1. 数据 库 连接 的 设置 


在 【文件 】 面 板 中 选择 要 编辑 的 网 页 index.php， 双 击 将 其 在 编辑 区 打开 。 然 后 切换 到 
【数据 库 】 面 板 ， 单 击 【+】 按 钮 ， 在 弹出 的 菜单 中 选择 【MySQL 连接 】 命 令 ， 在 打开 的 
【MySQL 连接 】 对 话 框 中 输入 连接 的 名 称 和 MySQL 的 连接 信息 ， 单 击 【确定 】 按 钮 ， 如 图 28-10 
所 示 。 

2. 主要 数据 绑 定 实现 


在 首页 中 有 三 处 需要 动态 调用 数据 的 地 方 ， 分 别 是 图 片 新 闻 、 文 字 新 闻 、 促 销 产 品 。 这 
里 就 出 现 了 问题 : 同样 是 新 闻 ， 怎 么 区 分 图 片 新 闻 和 文字 新 闻 呢 ? 怎么 区 分 哪 种 商品 出 现在 
首页 呢 ? 
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下 面 就 来 介绍 如 何 将 这 些 数 据 绑 定 到 网 页 中 ， 有 具体 操作 步骤 如 下 。 
ECEIDp 打开 【 绑 定 】 面 板 ， 这 里 需要 三 个 数据 绑 定 记录 集 ， 分 别 对 应 图 片 新 闻 、 文 字 
新 闻 、 促 销 产 品 ， 如 图 28-11 所 示 。 


EE | 
wu 有 :Eee 


28-10 【MySQL 连接 】 对 话 框 


EDy 单 击 打开 图 片 新 闻 记 录 集 Recnewstop， 如 图 28-12 所 示 。 在 SQL 语句 后 面 ， 有 
一 个 limit 1 指令 ， 这 个 指令 用 于 从 数据 表 中 取出 一 条 数据 ， 整 个 SQL 语句 的 意思 是 
从 news 表 中 取出 推荐 的 图 片 不 为 空 的 最 新 发 布 的 一 条 数据 。 如 果 数 据 量 比较 大 ， 使 
用 limit 指令 就 显得 非常 有 必要 ， 可 以 大 大 提高 数据 的 检索 效率 。 

EGRB 由 于 仅 获取 一 条 信息 ， 不 需要 设置 重复 区 域 ， 接 着 设 定 跳 转 详 细 信 息 页 面 ， 如 
28-13 所 示 。 


EE 


28-12 ”Recnewstop 记录 集 28-13 ”设置 跳 转 详细 信息 页 面 
单 击 打开 Recnews 记录 集 ， 这 个 记录 集 设置 的 目的 是 获取 6 条 最 新 的 企业 新 
闻 。SQL 语句 的 意义 是 从 news 表 中 取出 6 条 最 新 发 布 的 新 闻 信 息 ， 如 图 28-14 所 示 。 
在 设 定 重 复 区 域 的 时 候 设 定 记录 条 数 为 6， 如 图 28-15 所 示 。 


图 28-14 ”Recnews 记录 集 28-15 【重复 区 域 】 对 话 框 


设 定 跳 转 详 细 信息 页 面 ， 如 图 28-16 所 示 。 
EDDD 打开 促销 产品 记录 集 Recprotop， 这 个 记录 集 的 目的 是 从 product 表 中 取出 最 新 
一 条 推荐 到 首页 的 产品 信息 ， 如 图 28-17 所 示 。 


EE 


图 28-16 设置 跳 转 详细 信息 页 面 图 28-17 ”Recporotop 记录 集 
本 于 BY 因为 仅 获取 一 条 记录 ， 也 不 需要 设置 重复 区 域 ， 设 定 跳 转 详细 信息 页 面 ， 如 图 28-18 
所 示 。 


28-18 设置 跳 转 详 细 信 息 页 面 


28.4 网 站 二 级 页 面 的 制作 
需要 动态 化 的 二 级 页 面 涉及 两 个 页 面 : 一 是 企业 新 闻 列 表 页 ; 二 是 企业 产品 展示 列表 页 。 
28.4.1 企业 新 闻 列 表 页 


在 【文件 】 面 板 中 打开 news 目录 下 的 indexphp， 在 新 闻 列 表 中 创建 一 个 用 于 获取 所 有 
企业 新 闻 的 记录 集 Recnews， 在 【 绑 定 】 面 板 中 将 其 打开 。SQL 语句 中 按时 间 的 降序 排列 所 
有 记录 ， 如 图 28-19 所 示 。 

列表 中 还 需要 设 定 重复 区 域 、 记 录 集 导航 条 和 显示 区 域 ， 如 图 28-20 所 示 。 
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图 28-19 Recnews 记录 集 图 28-20 新闻 列 表 页 
28.4.2 ”企业 产品 展示 列表 页 


在 【文件 】 面 板 中 打开 chanpin 目录 下 的 index.php， 在 产品 列表 中 创建 两 个 记录 集 ， 一 个 是 
用 于 获取 所 有 推荐 产品 的 记录 集 Recprotop; 另 一 个 是 用 于 获取 产品 类 别 的 记录 集 Recproclass。 
打开 【 绑 定 】 面 板 ， 可 以 查看 ， 加 图 28-21 Pie 


图 28-21 【 绑 定 】 面 板 


制作 企业 产品 展示 列表 页 的 具体 操作 步骤 如 下 。 

ECDp 打开 Recproclass 记录 集 ，SQL 语句 的 意思 是 选择 产品 类 别 表 中 的 所 有 记录 并 按 
classnum 升序 排列 ， 如 图 28-22 所 示 。 

设 定 重复 区 域 ， 选 取 所 有 记录 ， 如 图 28-23 所 示 。 


oe 


28-22 ”Recproclass 记录 集 28-23 【重复 区 域 】 对 话 框 


ES 打开 Recprotop 记录 集 ， 该 记录 集 的 作用 是 从 产品 信息 表 中 取出 推荐 的 所 有 产 
品 并 按 发 布 时 间 降 序 排列 ， 最 后 发 布 的 产品 最 先 显示 ， 如 图 28-24 所 示 。 

由 于 是 图 片 列表 ， 在 设 定 的 时 候 在 【服务 器 行为 】 面 板 中 选择 DWteam 一 
Horizontal Looper MX 命令 ， 如 图 28-25 所 示 。 

EEIDs 打开 Horizontal Looper MX 对 话 框 ， 在 其 中 设 定 行列 为 3 行 3 列 ， 如 图 28-26 
所 示 。 
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识 将 波 六 二 可 痰 汶 到 路 昌 几 8z 滥 


Go To Detail Page 
Go To Related page 


28-25 ”选择 Horizontal Looper MX 命令 28-26 ”Horizontal Looper MX 对 话 框 


28.5 ”网 站 后 台 分 析 与 讨论 


由 于 后 台 涉及 的 功能 比较 多 ， 所 以 使 用 index.php 页 
进行 导航 。 在 【文件 】 面 板 中 打开 admin 目录 下 的 
index.php 页 面 ， 可 以 看 到 这 里 就 是 一 个 导航 页 ， 没 有 具 
体 的 页 面 功能 ， 如 图 28-27 所 示 。 

【新 增 企 业 新 闻 】 和 【管理 企业 新 闻 】 用 于 企业 
新 闻 信息 的 管理 ，【 新 增产 品类 别 】 和 【管理 产品 类 
别 】 用 于 产品 类 别 的 管理 ，【 新 增产 品 信息 】 和 【管理 
产品 信息 】 用 于 产品 信息 的 管理 。 图 28-27 后 台 管 理 页 面 


28.6 ”网 站 成 品 预览 


网 站 制作 完成 后 ， 下 面 就 可 以 在 浏览 器 中 预览 网 站 的 各 个 页 面 了 ， 具 体操 作 步 骤 如 下 。 
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EED 使 用 浏览 器 打开 index.php 文件 ， 如 图 28-28 所 示 。 


EDUD) 单 击 【企业 资讯 】 链 接 ， 进 入 信息 列表 页 ， 如 图 28-29 所 示 。 


图 28-28 网 站 首页 图 28-29 信息 列表 页 


葬 了 BY 单 击 任意 一 条 信息 ， 进 入 信息 内 容 页 ， 如 图 28-30 所 示 。 
ECG 单 击 导航 条 中 的 【产品 展台 】 链 接 ， 进 入 产品 展示 列表 页 ， 如 图 28-31 所 示 。 
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图 28-30 ”信息 内 容 页 图 28-31 产品 展示 列表 页 


ED 单 击 【 后 台 管 理 】 按 钮 ， 在 打开 的 【管理 员 登 录 画 面 】 对 话 框 中 输入 默认 的 管 
理 账号 及 密码 admin， 如 图 28-32 所 示 。 
基于 BY 单 击 【 登 录 管理 画面 】 按 钮 ， 进 入 后 台 管 理 界面 ， 如 图 28-33 所 示 。 


E22 aoax 
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28-32 【管理 员 登 录 画 面 】 对 话 框 28-33 ”后 台 管理 页 面 
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ET 单 击 左 侧 的 【新 增 企业 新 闻 】 链 接 ， 进 入 【新 增 企业 新 闻 】 页 面 ， 在 其 中 输入 
相关 数据 信息 ， 如 图 28-34 所 示 。 
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28-34 【新 增 企 业 新 闻 】 页 面 


ECERB 输入 完 各 项 信息 之 后 ， 单 击 【 提 交 】 按 钮 ， 回 到 【管理 企业 新 闻 】 页 面 ， 可 以 
使 用 每 则 信息 旁 的 【编辑 】 及 【删除 】 链 接 来 执行 编辑 和 删除 操作 ， 如 图 28-35 所 示 。 

ECERD) 单 击 左 侧 的 【新 增产 品类 别 】 和 链接 ， 进 入 【新 增产 品类 别 】 页 面 ， 如 图 28-36 
所 示 。 


管理 企业 新 闻 
WD 区 
四 2012-11-30 00;00;00 小 洲 生子 或 “ 绝 身 ”再 上 市 名 竹 呈 守 新 增产 品类 别 
后 2012-11-30 o0:00:00 美国 下 认可 中 要 了 3 到 位 [~ 
18 2012-12-03 00:00:00 微软 的 0 大 村 区 下 图 步 成 真 [图 ] [推荐 ] 编辑 吕 除 ! 产品 类 别 : 
的 2012-12-03 00:00:00 有 许多 职场 人 士 执行 力 不 强 的 原因 纺 维 多 其 序 ; 
1 2012-12-03 00:00:00 你 是 “病态 性 上 限 ” 区 ? 捐 缠 吧 际 
和 提交] [ 重 设 ] [全 上 一 页 
28-35 【管理 企业 新 闻 】 页 面 28-36 【新 增产 品类 别 】 页 面 


EC 输入 类 别名 称 及 排序 号 之 后 ， 返 回 到 【管理 产品 类 别 】 界 面 ， 可 以 使 用 每 则 类 
别 旁 的 【编辑 】 及 【删除 】 链 接 来 执行 相应 操作 ， 如 图 28-37 所 示 。 
EEC 单 击 左 侧 的 【新 增产 品 信息 】 链 接 ， 进 入 【新 增产 品 】 页 面 ， 如 图 28-38 所 示 。 
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28-37 【管理 产品 类 别 】 页 面 


EEBP9 输入 各 项 信息 之 后 ， 返 回 到 【产品 管理 】 界 面 ， 可 以 使 用 每 则 产品 旁 的 【 编 
辑 】 及 【删除 】 链 接 来 执行 编辑 和 删除 操作 ， 如 图 28-39 所 示 。 
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图 28-38 【新 增产 品 】 页面 


图 28-39 【产品 管理 】 页 面 


就 


常见 的 移动 设备 有 条 


等 ， 平板 电脑 与 手机 的 差异 在 于 设置 网 页 的 分 辩 率 不 同 。 下 面 


局 8 


作 一 个 适合 智能 手机 浏览 的 网 站 为 例 ， 来 介绍 开发 网 站 的 方式 。 


随 着 移动 电子 的 发 展 ， 网 站 开发 也 进入 了 一 个 新 的 阶段 。 
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网 页 设计 与 网 站 建设 
案例 课堂 >… 


29.1 网 站 设计 分 析 


由 于 手机 和 电脑 相 比 ， 屏 幕 小 很 多 ， 所 以 手机 网 站 在 版 式 上 相对 比较 固定 ， 通 常 都 是 
1+(n)+1 型 版 式 布局 。 最 终 效果 如 图 29-1 所 示 。 


29-1 网 站 首页 


29.2 ”网 站 结构 分 析 


手机 网 站 制作 由 于 受到 版 面 限制 ， 不 能 把 传统 网 站 上 的 所 有 应 用 、 链 接 都 移植 过 来 。 这 
不 是 简单 的 技术 问题 ， 而 是 用 户 浏览 习惯 的 问题 。 所 以 设计 手机 网 站 的 时 候 首要 考虑 的 问题 
是 怎么 精简 传统 网 站 上 的 应 用 ， 保 留 最 主要 的 信息 和 功能 。 

要 确定 你 的 服务 中 最 重要 的 部 分 。 如 果 是 展示 新 闻 或 博客 等 信息 ， 那 就 让 你 的 访问 者 最 
快 地 接触 到 信息 ， 如 果 是 执行 更 新 信息 等 操作 ， 那 么 就 让 他 们 快速 地 达到 目的 。 

如 果 功 能 繁多 ， 要 尽 可 能 地 删 减 ， 剔 除 一 些 额外 的 应 用 ， 集 中 在 重要 的 应 用 上 。 如 果 一 
个 用 户 需要 改变 设置 或 者 做 大 改动 ， 那 他 们 就 会 去 使 用 电脑 版 。 

可 以 提供 转 至 全 版 网 站 的 方式 。 手 机 版 网 站 不 会 具备 全 部 ry 
的 功能 设置 。 虽 然 重新 转 至 全 版 网 站 的 用 户 成 本 要 高 ， 但 是 这 
个 选项 至 少 要 有 。 rm 

总 的 来 说 ， 成 功 的 手机 网 站 的 设计 秉持 一 个 简明 的 原则 : | 
能 够 让 用 户 快速 地 得 到 他 们 想 知道 的 ， 最 有 效率 地 完成 他 们 的 ET 
行为 ， 所 有 设置 都 要 让 他 们 满意 。 

与 传统 网 站 相 比 ， 手 机 网 站 架构 可 选择 性 比较 少 ， 本 例 的 
结构 如 图 29-2 所 示 。 


重点 信息 推荐 


页 肢 


图 29-2 网 页 结构 
29.3 ”网 站 主页 面 的 制作 


由 于 手机 浏览 器 支持 的 原因 ， 手 机 的 导航 菜单 也 受到 一 定 程度 上 的 限制 ， 没 有 太 多 复杂 
生动 的 效果 展现 ， 一 般 都 以 水 平 菜单 为 主 。 具 体 代 码 如 下 。 


全 "2 


[es 


<DIV Class="w1 N1"> 
<P><A 
href="#"> 导 航 </A> 
<A href="#"> 天 气 </A> 
<A href="#"> 微 博 </A> 
<A href="#"> 笑 话 </A> 
<A href="#"> 星 座 </A></P> 
<P><A href="#"> 游 戏 </A> 
<A href="#"> 阅 读 </A> <A 
href="#"> 音 乐 </A> <A 
href="#"> 动 漫 </A> 
<R 
href="#"> 视 频 </R> 
</P> 
</DIV> 


制作 完 网 页 中 的 菜单 后 ， 下 面 还 需要 为 菜单 添加 CSS 样式 ， 具 体 代 码 如 下 。 


sl 

PADDING-BOTTOM: 3px; PADDING-LEFT: 1l10px; PADDING-RIGHT: 1l0px; PADDING-TOP: 
3px 

-N1 RAT 

MARGIN-RIGHT: 4px 

和 


运行 结果 如 图 29-3 所 示 。 
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导航 天 气 微 博 笑话 星座 
游戏 阅读 音乐 动漫 视频 


29-3 ”网 页 导航 菜单 


下 面 设置 手机 网 页 的 模块 内 容 ， 手 机 网 页 各 个 模块 的 布局 内 容 区 别 不 大 ， 基 本 上 以 div、 
p、a 这 三 个 标签 为 主 ， 具 体 代码 如 下 。 


<DIV class=wl> 

<P><A href="#"><SPAN 

style="COLOR: rgb(51,51,51)"><STRONG> 淘 宝 砍 价 ， 血 拼 到 底 </sTRONG></SPAN></A> 
</P> 

<P><A href="#"><SPAN 

style="COLOR: rgb (51, 51,51) "> 不 是 1 折 </SPAN></A><I class=s>|</I><A 
href="#"><SPAN 

style="COLOR: rgb (51, 51, 51) "> 不 要 钱 </sSPAN></A> </P></DIV> 

<DIV class="w a3"> 

<P class="hn hnl"><A 

href="#"><IMG 

alt=" 淘 宝 砍 价 ， 血 拼 到 底 ” src="images/1.jpg"></A> </P></DIV> 

<DIV class="1s pbl"> 

<P><I class=s>.</I><R 

href="#"><SPAN 

style="COLOR: rgb (51, 51,51) "> 信息 内 容 标题 信息 内 容 标题 </sPAN></A></P> 
<P><I class=s>.</I><A 

href="#"><SPAN 

style="COLOR: rgb (51, 51, 51) "> 信息 内 容 标题 信息 内 容 标题 </sPAN></A></P> 


网 页 设计 与 网 站 建设 
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<P><I class=s>.</I><A 

href="#"><SPAN 

style="COLOR: rgb (51, 51,51) "> 信息 内 容 标题 信息 内 容 标题 </sPAN></A></P> 

<P><I class=s>.</I><A 

hre #"><SPAN 

style="COLOR: rgb (51, 51, 51) "> 信息 内 容 标题 信息 内 容 标题 </SPRN></R></P></DIV> 


下 面 为 模块 添加 CSS 样式 ， 具 体 代码 如 下 。 


Et 

MARGIN: S5px 5px Opx; PADDING-TOP: 5px 
.1s A:visited { 

COLOR: #551a8b 

} 

.ee { 

COLOR: #3a88c0 

} 

i 

TEXT-ALIGN: center 

b 

a 

PADDING-BOTTOM: Opx; PADDING-LEFT: lO0px; PADDING-RIGHT: lO0px; PADDING-TOP: 
Opx 

} 

.pbl { 

PADDING-BOTTOM: 1l0px 

3 


实现 效果 如 图 29-4 所 示 。 


淘宝 砍 价 ， 血 拼 到 底 
不 是 1 折 | 不 要 钱 


29-4 ”网 页 预览 效果 


29.4 网 站 成 品 预览 


下 面 给 出 网 站 成 品 的 源 代 码 ， 具 体 如 下 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

<!-- saved from url=(0018)http://m.sohu.com/ --> 

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE> 手 机 网 页 </TITLE> 
<META content="text/html; charset=utf-8" http-equiv=Content-Type> 

<META content=no-cache http-equiv=Cache-Control> 

<META name=MobileOptimized content=240> 

<META name=viewport 
content=width=device-width,initial-scale=1.33,minimum-scale=]1.0,maximum— 
scale=1 .0> 


辣 


<LINK rel=stylesheet 
type=text/css href="images/css.css"” media=all><!-- 开 发 过 程 中 用 外 链 样式 ， 开 发 完成 
后 可 直接 写 入 页 面 的 style 块 内 --><!-- 股票 碎片 1 --> 
<STYLE type=text/css>.stock green { 
COLOR: #008000 


由 cz 尖 国 


.Stock red { 
COLOR: #f£00 

-stock black { 
COLOR: #333 

3 

-Stock wrap { 
WIDTH: 240px 


识 将 泪 首 其 加 号 器 注 党 州 哨 他 


.Stock mod01l { 
PADDING-BOTTOM: 2px; LINE-HEIGHT: l18px; PADDING-LEFT: l0px; PADDING- 
RIGHT: Opx; FONT-SIZE: 12px; PADDING-TOP: 1l0px 
} 
.Stock mod01 .stock sl { 
PADDING-RIGHT: 3px 


GG 


} 
.Stock mod01 .stock name { 

COLOR: #039; FONT-SIZE: 14px 
.Stock seabox { 

PADDING-BOTTOM: 6px; PADDING-LEFT: l0px; PADDING-RIGHT: Opx; FONT-SIZE: 
14px; PADDING-TOP: Opx 
.Stock seabox .stock kw { 

BORDER-BOTTOM: #3a88c0 lpx solid; BORDER-LEFT: #3a88c0 lpx solid; 
PADDING-BOTTOM: 2px; PADDING-LEFT: Opx; WIDTH: 130px; PADDING-RIGHT: Opx; 
HEIGHT: 16px; COLOR: #999; FONT-SIZE: 14px; VERTICAL-ALIGN: -lpx; BORDER- 
TOP: #3a88c0 lpx solid; BORDER-RIGHT: #3a88c0 lpx solid; PADDING-TOP: 2px 
.Stock seabox .stock btn { 

BORDER-BOTTOM: medium none; TEXT-ALIGN: center; BORDER-LEFT: medium 
none; PADDING-BOTTOM: Opx; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; 
BACKGROUND: #3a88c0; HEIGHT: 22px; COLOR: #fff; FONT-SIZE: 14px; BORDER-TOP: 
medium none; CURSOR: pointer; BORDER-RIGHT: medium none; PADDING-TOP: Opx 
3 
.Stock seabox SPAN { 

PADDING-BOTTOM: Opx; PADDING-LEFT: 4px; PADDING-RIGHT: 0px; PADDING-TOP: 

4px 
} 
.Stock seabox A { 

COLOR: #039; TEXT-DECORATION: none 


</STYLE> 

<!-- 股票 碎片 1 --> 

<META name=GENERATOR content="MSHTML 8.00.6001.19328"></HEAD> 
<BODY> 

<DIV class="w h Header"> 

<TABLE> 
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<TBODY> 
<TR> 
<TD> 
<H1><IMG class=Logo alt= 手 机 搜狐 src="images/logo.png" 
height=32></H1></TD> 
<TD> 
<DIV class="as a2"> 
<DIV id=weather tip class=weather min><A 
href="#" name=top><IMG style="HEIGHT: 32px" 
id=weather icon src="images/1-s.jpg"></IMG> 北京 <BR>6'C~19C 
</A></DIV></DIV></TD></TR></TBODY></TABLE></DIV> 
<DIV class="wl1 N1"> 
<P><A 
href="#"> 导 航 </A> 
"#"> 天 气 </R> 


href="#"> 音 乐 </A> <A 
href="#"> 动 漫 </A> 


<A 
href="#"> 视 频 </A> 
</P></DIV> 


<DIV class="wl cl"></DIV> 
<DIV class="w h"> 
<TABLE> 
<TBODY> 
<TR> 
<TD width="54%"> 
<H3><IMG alt="" src="images/caibanlanmu.jpg" height=16><I 
class=s></I> 热 点 </H3></TD> 
<TD width="46%"> 
<DIV class="as a2"><A 
href="#"> 专 题 </A><I 
class=s>。</I><R 
href="#"> 策 划 </A></DIV></TD></TR></TBODY></TABLE></DIV> 
<DIV class=w1> 
<P><A href="#"><SPAN 
style="COLOR: rgb(51,51,51)"><STRONG> 淘 宝 砍 价 ， 血 拼 到 底 </sTRONG></SPAN></A> 
</P> 
<P><A href="#"><SPAN 
style="COLOR: rgb(51,51,51)"> 不 是 1 折 </SPAN></A><I class=s>1</I><R 
href="#"><SPAN 
style="COLOR: rgb (51, 51, 51) "> 不 要 钱 </SPAN></R> </P></DIV> 
<DIV class="w a3"> 
<P class="hn hnl"><A 
href="#"><IMG 
alt=" 淘 宝 砍 价 ， 血 拼 到 底 ” src="images/1.jpg"></A> </P></DIV> 
<DIV class="1s pbl"> 
<P><I class=s>.</I><R 
href="#"><SPAN 
style="COLOR: rgb (51, 51, 51) "> 信息 内 容 标题 信息 内 容 标题 </SPAN></A></P> 


全 加 


<P><I class=s>.</I><A 
href="#"><SPAN 
style="COLOR: rgb (51, 51, 51) "> 信息 内 容 标题 信息 内 容 标题 </sPAN></A></P> 
<P><I class=s>.</I><A 
hre #"><SPAN 
style="COLOR: rgb (51,51, 51) "> 信息 内 容 标题 信息 内 容 标题 </sSPAN></A></P> 
<P><I class=s>.</I><A 
href="#"><SPAN 
style="COLOR: rgb (51, 51, 51) "> 信息 内 容 标题 信息 内 容 标题 </SPRN></R></P></DIV> 
<DIV class="w h"> 
<TABLE> 
<TBODY> 
<TR> 
<TD width="55%"> 
<H3><IMG alt="" src="images/caibanlanmu.jpg" height=16><I 
class=s></I><A 
href="#"> 新 闻 </A></H3></TD> 
<TD width="45%"> 
<DIV class="as a2"><A 
href="#"> 分 类 </A><I 
class=s>*</I><A 
href="#"> 分 类 </A></DIV></TD></TR></TBODY></TABLE></DIV> 
<DIV class=1ls> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
class=s>.</I><A 
#"><SPAN 
COLOR: rgb (194,0,0)"> 微 博 </sPAN></A><I class=v>1</I><R 
#"><SPAN 
COLOR: rgb (194,0,0)"> 信 息 内 容 </sPAN></A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标 题 </A></P></DIV> 
<P class="w f a2 pbl"><A href="#"> 更 多 ggt; &gt;</A></P> 
<DIV class="w h"> 
<TABLE> 
<TBODY> 
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<TR> 
<TD width="55%"> 
<H3><IMG alt="" src="images/caibanlanmu.jpg" height=16><I 
class=s></I><A 
href="#"> 分 类 </A></H3></TD> 
<TD width="45%"> 
<DIV class="as a2"><A 
href="#"> 分 类 </A><I 
class=s>。</I><R 
href="#"> 分 类 </A></DIV></TD></TR></TBODY></TABLE></DIV> 
<DIV class="]ls 1s2"> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P> 
<P><I class=s>.</I><A 
href="#"> 信 息 内 容 标题 信息 内 容 标题 </A></P></DIV> 
<P class="w f a2 pbl"><A href="#"> 更 多 ggt; ggt;</A></P> 
<DIV class="1s cl pbl">*<A class=h6 
href="#"> 信 息 内 容 标题 信息 内 容 标题 !</A><BR>。<A 
class=h6 


href="#"> 信 息 内 容 标题 信息 内 容 标题 </A><BR></DIV> 


<DIV class=cl><!--UCAD[Vv=1;ad=1112]--></DIV> 

<DIV class="w h"> 

<H3> 站 内 直通 车 </H3></DIV> 

<DIV class="w1 N1"> 

<P><A 

href="#"> 导 航 </A> 

<A 

href="#"> 新 闻 </A> 

<A href="#"> 娱 乐 </A> <A 

href="#"> 体 育 </A> <A 

href="#"> 女 人 </A> </P> 

<P><A href="#"> 财 经 <c/A> <A 

href="#"> 科 技 </A> <A 

href="#"> 军 事 </A> <A 

href="#"> 星 座 </A> <A 

href="#"> 图 库 </A> </P></DIV> 

<P class="w a3"><A class=Top href="#">1+ 回 顶部 </A></P> 
<DIV class="w a3 Ftr"> 

<P><A href="#"> 普 版 </A><I 

class=s>|</I><B class=c2> 彩 版 </B><I class=s>|</I><A 
href="#"> 触 版 </A><I 

class=s>|</I><A href="#">PC</A></P> 

<P class=f12><A href="#"> 合 作 </A><I class=s>-</I><A 
href="#"> 留 言 </A></P> 

<P class=f12>Copyright © 2012 xfytabao.com</P></DIV></BODY></HTML> 


最 终 成 品 的 网 页 预览 效果 如 图 29-5 所 示 。 


[Er 天 气 微 王 笑话 呈 座 
戏 阅读 音乐 动漫 视频 


牵 将 由 书 革 司 否 中 


图 29-5 ”网 页 预览 效果 


第 8 篇 
网 站 全 能 扩展 篇 


和 第 30 章 让 别人 浏览 我 的 成 果 一 一 网 站 的 测试 与 发 布 
和 a 第 31 章 保障 网 站 正常 运行 一 一 网 站 安全 与 防御 策略 
和 a 第 32 章 增加 点 击 率 一 一 网 站 优化 与 推广 


将 本 地 站 点 中 的 网 站 建设 好 后 ， 接 下 来 需要 将 站 点 上 传 到 远 端 服务 器 上 ， 以 供 


Internet 上 的 用 户 浏览 。 
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网 页 设计 与 网 站 建设 
案例 课堂 四 一 


30.1 上 传 网 站 前 的 准备 工作 


在 将 网 站 上 传 到 网 络 服务 器 之 前 ， 首 先 要 在 网 络 服务 器 上 注册 域名 和 申请 网 络 空间 ， 同 
时 ， 还 要 对 本 地 计算 机 进行 相应 的 配置 ， 以 完成 网 站 的 上 传 。 


30.1.1 注册 域名 


域名 可 以 说 是 企业 的 “网 上 商标 ”， 所 以 在 域名 的 选择 上 要 与 注册 商标 相符 合 ， 以 便于 
记忆 。 

在 申请 域名 时 ， 应 该 选择 短 且 容易 记忆 的 域名 ， 另 外 最 好 还 要 和 客户 的 商业 有 直接 的 关 
系 ， 尽 可 能 地 使 用 客户 的 商标 或 企业 名 称 。 


30.1.2 ”申请 空间 


域名 注册 成 功 ， 接 下 来 需要 为 自己 的 网 站 在 网 上 安 个 “家 ”， 即 申请 网 站 空间 。 网 站 空 
间 是 指 用 于 存放 网 页 的 、 置 于 服务 器 中 的 、 可 通过 国际 互联 网 访问 的 硬盘 空间 (就 是 用 于 存放 
网 站 的 服务 器 中 的 硬盘 空间 )。 

自己 注册 了 域名 之 后 ， 还 需要 进行 域名 解析 。 

域名 是 为 了 方便 记忆 而 专门 建立 的 一 套 地 址 转换 系统 。 要 访问 一 台 互 联网 上 的 服务 器 
最 终 还 必须 通过 IP 地 址 来 实现 ， 域 名 解析 就 是 将 域名 重新 转换 为 PP 地 址 的 过 程 。 

一 个 域名 只 能 对 应 一 个 人 地 址 ， 而 多 个 域名 则 可 同时 被 解析 到 一 个 PP 地 址 。 域 名 解析 
需要 由 专门 的 域名 解析 服务 器 (DNS) 来 完成 。 


30.2 测试 网 站 


网 站 上 传 到 服务 器 后 ， 工 作 并 没有 结束 ， 下 面 要 做 的 工作 就 是 在 线 测试 网 站 ， 这 是 一 项 
十 分 重要 又 非常 烦琐 的 工作 。 在 线 测 试 工 作 包 括 测试 网 页 外 观 、 测 试 链 接 、 测 试 网 页 程序 、 
检测 数据 库 ， 以 及 测试 下 载 时 间 是 否 过 长 等 。 


30.2.1 案例 1 一 一 测试 站 点 范围 的 链接 


测试 网 站 超 链 接 ， 也 是 上 传 网 站 之 前 必 不 可 少 的 工作 之 一 。 对 网 站 的 超 链接 逐一 进行 测 
试 ， 不 仅 能 够 确保 访问 者 能 够 打开 链接 目标 ， 并 且 还 可 以 使 超 链接 目标 与 超 链接 源 保持 高 度 
的 统一 。 

在 Dreamweaver CS6 中 进行 站 点 各 页 面 超 链接 测试 的 具体 操作 步骤 如 下 。 

EEC 打开 网 站 的 首页 ， 在 窗口 中 选择 【站 点 】 一 【检查 站 点 范围 的 链接 】 菜 单 命 

令 ， 如 图 30-1 所 示 。 


在 Dreamweaver CS6 设计 器 的 下 端 弹出 【链接 检查 器 】 面 板 ， 并 给 出 本 页 面 的 
检测 结果 ， 如 图 30-2 所 示 。 
| sow 和 ah 
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图 30-1 选择 【检查 站 点 范围 的 链接 】 菜 单 命令 30-2 ”链接 检查 器 


EEC 如 果 需 要 检测 整个 站 点 的 超 链 接 时 ， 单 击 左 侧 的 区 按钮 ， 在 弹出 的 下 拉 菜单 中 
选择 【检查 整个 当前 本 地 站 点 的 链接 】 命 令 ， 如 图 30-3 所 示 。 
EEC 在 【链接 检查 器 】 底 部 弹出 整个 站 点 的 检测 结果 ， 如 图 30-4 所 示 。 


了 可 20 人 HTML EE 了 ET ，371 个 正确 ，Z5 个 断 御 ， EE 


图 30-3 ”检查 整个 当前 网 站 图 30-4 ”站 点 测试 结果 


20 于 十 巴 立 文件 。 总 站 志 


30.2.2 案例 2 一 一 改变 站 点 范围 的 链接 


更 改 站 点 内 某 个 文件 的 所 有 链接 的 具体 操作 步骤 如 下 。 

EEC 在 窗口 中 选择 【站 点 】 一 【改变 站 点 范围 的 链接 】 菜 单 命令 ， 打 开 【 更 改 整个 
站 点 链接 】 对 话 框 ， 如 图 30-5 所 示 。 

ECERUP9 在 【更 改 所 有 的 链接 】 文 本 框 中 输入 要 更 改 链接 的 文件 ， 或 者 单 击 右边 的 【 浏 
览 文件 】 按 钮 回 ， 在 打开 的 【选择 要 修改 的 链接 】 对 话 框 中 选中 要 更 改 链接 的 文 
件 ， 然 后 单 击 【 确 定 】 按 钮 ， 如 图 30-6 所 示 。 

ECDIS 在 【 变 成 新 链接 】 文 本 框 中 输入 新 的 链接 文件 ， 或 者 单 击 右边 的 【浏览 文件 】 
按钮 回 ， 在 打开 的 【选择 新 链接 】 对 话 框 中 选中 新 的 链接 文件 ， 如 图 30-7 所 示 。 

EEC 单 击 【确定 】 按 钮 ， 即 可 改变 站 点 内 某 一 个 文件 的 链接 情况 ， 如 图 30-8 所 示 。 
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图 30-5 【更 改 整 个 站 点 链接 】 对 话 框 图 30-6 【选择 要 修改 的 链接 】 对 话 框 


Templates/ 横 孤 htm 


变 成 新 钢 接 (D; 
Templates/ 模 版-Lhtm 


图 30-7 【选择 新 链接 】 对 话 框 图 30-8 更改 整个 站 点 链接 
30.2.3 ”案例 3 一 一 查找 和 替换 


在 Dreamweaver CS6 中 ， 不 但 可 以 像 Word 等 应 用 软件 一 样 对 页 面 中 的 文本 进行 查找 和 
蔡 换 ， 而 且 可 以 对 整个 站 点 中 的 所 有 文档 进行 源 代码 或 标签 等 内 容 的 查找 和 替换 。 
EC 选择 【编辑 】 一 【查找 和 蔡 换 】 菜 单 命令 ， 如 图 30-9 所 示 。 
EEIPs 打开 【查找 和 蔡 换 】 对 话 框 ， 在 【查找 范围 】 下 拉 列 表 框 中 ， 可 以 选择 【当前 
文档 】、【 所 选 文 字 】、【 打 开 的 文档 】、【 整 个 当前 本 地 站 点 】 等 选项 ， 在 【 搜 
索 】 下 拉 列 表 框 中 ， 可 以 选择 对 【文本 】、【 源 代码 】、【 指 定 标签 】 等 内 容 进行 
搜索 ， 如 图 30-10 所 示 。 


30-9 选择 【查找 和 蔡 换 】 命 令 图 30-10 【查找 和 替换 】 对 话 杠 
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国 于 BY 在 【查找 】 列 表 框 中 输入 要 查找 的 具体 内 容 ， 在 【替换 】 列 表 框 中 输入 要 蔡 换 
的 内 容 ; 在 【选项 】 选 项 组 中 ， 可 以 设置 【区 分 大 小 写 】、【 全 字 匹 配 】 等 选项 。 
单 击 【 查 找 下 一 个 】 或 者 【 蔡 换 】 按 钮 ， 就 可 以 完成 对 页 面 内 指定 内 容 的 查找 和 蔡 
换 操作 。 


30.2.4 案例 4 一 一 清理 文档 


中 ， 可 以 清理 一 些 不 必要 的 HTML， 也 可 以 清理 Word 生成 的 HTML， 以 增加 网 页 打开 的 速 
度 。 


具体 操作 步骤 如 下 。 
1. 清理 不 必要 的 HTML 


EEIoDp 选择 【命令 】 一 【清理 XHTML 】 菜 单 命令 ， 弹 出 【清理 HTML/XHTML) 对 
EEJpy 在 【清理 HTML/XHTML 】 对 话 杠 
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中 ， 可 以 设置 对 【 空 标签 区 块 】、【 多 余 ee 
的 杠 套 标签 】 和 【 Dreamweaver 特殊 标 Di 

记 】 等 内 容 的 清理 ， 具 体 设置 如 图 30-11 二 
所 示 。 Re 


EEDD) 单 击 【 确 定 】 按 钮 ， 即 可 完成 对 页 面 
指定 内 容 的 清理 。 
2. 清理 Word 生成 的 HTML 


ED 选择 【命令 】 一 【清理 Word 生成 的 HTML)】 菜单 命令 ， 打 开 【 清 理 Word 生成 
的 HTML】 对 话 框 。 

EC 在 【基本 】 选 项 卡 中 ， 可 以 设置 要 清理 的 来 自 Word 文档 的 特定 标记 、 背 景 颜 色 
等 选项 ， 如 图 30-12 所 示 ; 在 【详细 】 选 项 卡 中 ， 可 以 进一步 地 设置 要 清理 的 Word 
文档 中 的 特定 标记 以 及 CSS 样式 表 的 内 容 ， 如 图 30-13 所 示 。 


30-11 ”清理 不 必要 的 HTML 
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30-12 【基本 】 选 项 卡 图 30-13 【详细 】 选 项 卡 
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EERB) 单 击 【 确 定 】 按 钮 ， 即 可 完成 对 页 面 中 由 Word 生成 的 HIML 内 容 的 清理 。 


30.3 发 布 网 站 


网 站 测试 好 以 后 ， 接 下 来 最 重要 的 就 是 发 布 网 站 。 只 有 将 网 站 发 布 到 远程 服务 器 上 ， 才 
能 让 浏览 者 浏览 。 设 计 者 可 以 利用 Dreamweaver 软件 自 带 的 上 传 功能 进行 发 布 ， 也 可 以 利用 
专门 的 FTP 软件 发 布 。 


30.3.1 案例 5 一 一 使 用 Dreamweaver 发 布 网 站 


在 Dreamweaver CS6 中 ， 使 用 站 点 窗口 工具 栏 中 的 电 和 会 按钮 ， 可 以 将 本 地 文件 夹 中 的 
文件 上 传 到 远程 站 点 ， 也 可 以 将 远程 站 点 的 文件 下 载 到 本 地 文件 夹 中 。 将 文件 的 上 传 /下 载 操 
作 和 存 回 /取出 操作 相 结 合 ， 就 可 以 实现 全 功能 的 站 点 维护 。 

使 用 Dreamweaver CS6， 可 以 将 本 地 网 站 文件 发 布 到 互联 网 的 网 站 空间 中 。 具 体操 作 步 
又 如 下 。 

EC 选择 【站 点 】 一 【管理 站 点 】 菜 单 命令 ， 打 开 【 管 理 站 点 】 对 话 框 ， 如 图 30-14 

所 示 。 
ECGD9 在 【管理 站 点 】 对 话 框 中 单 击 【 编 辑 】 按 钮 图， 打开 【站 点 设置 对 象 】 对 话 
框 ， 选 择 【 服 务 器 】 选 项 ， 如 图 30-15 所 示 。 


30-14 【管理 站 点 】 对 话 框 图 30-15 【站 点 设置 对 象 】 对 话 框 


ETE> 单 击 右 侧面 板 中 的 本 按钮， 如 图 30-16 所 示 。 

EZY 在 【服务 器 】 文 本 框 中 输入 服务 器 的 名 称 ， 在 【连接 方法 】 下 拉 列 表 框 中 选择 
FTP 选项 ， 在 【FTP 地址】 文本 框 中 输入 服务 器 的 地 址 ， 在 【用 户 名 】 和 【密码 】 
文本 框 中 输入 相关 信息 ， 单 击 【测试 】 按 钮 ， 可 以 测试 网 络 是 否 连接 成 功 ， 单 击 
【保存 】 按 钮 ， 完 成 设置 ， 如 图 30-17 所 示 。 

本 TY> 返回 【站 点 设置 对 象 】 对 话 框 ， 如 图 30-18 所 示 。 

TY 单 击 【保存 】 按 钮 ， 完 成 设置 ， 返 回 到 【管理 站 点 】 对 话 框 ， 如 图 30-19 所 示 。 
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30-17 ”输入 服务 器 信息 
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30-18 【站 点 设置 对 象 】 对 话 杠 30-19 【管理 站 点 】 对 话 杠 


ED 单 击 【 完 成 】 按 钮 ， 返 回 站 点 文件 窗口 。 在 【文件 】 面 板 中 ， 单 击 工具 栏 中 的 
团 按 钮 ， 如 图 30-20 所 示 。 
EECDD 打开 上 传 文件 窗口 ， 在 该 窗口 中 单 击 器 按钮 ， 如 图 30-21 所 示 。 
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30-20 【文件 】 面 板 30-21 上 传 文件 窗口 


EDUD 开始 连接 到 【我 的 站 点 】 之 上 。 单 击 工具 栏 中 的 会 按钮 ， 弹 出 一 个 提示 对 话 
框 ， 如 图 30-22 所 示 。 
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EC 单 击 【 确 定 】 按 钮 ， 系 统 开始 上 传 网 站 内 容 ， 如 图 30-23 所 示 。 


30-22 ”提示 对 话 框 图 30-23 开始 上 传 文件 
30.3.2 ”案例 6 一 一 使 用 FTP 工具 上 传 网 站 


还 可 以 利用 专门 的 FTP 软件 上 传 网 页 ， 有 具体 操作 步骤 如 下 (本 小 节 以 Cute FTP 8.0 进行 
讲解 )。 
四 TD 在 FTP 软件 的 操作 界面 中 ， 选 择 【文件 】 一 【新 建 】 一 【FTP 站 点 】 菜 单 命 
令 ， 如 图 30-24 所 示 。 
EC 弹出 【此 对 象 的 站 点 属性 ， 无 标题 (4)】 对 话 框 ， 如 图 30-25 所 示 。 


30-24 选择 【FTP 站点】 菜单 命 令 30-25 【此 对 象 的 站 点 属性 : 无 标题 (4)】 对 话 框 


EEBp 在 【此 对 象 的 站 点 属性 : 无 标题 (4)】 对 话 框 中 根据 提示 输入 相关 信息 ， 单 击 
【连接 】 按 钮 ， 连 接 到 相应 的 地 址 ， 如 图 30-26 所 示 。 

EC 返回 主 界面 后 ， 切 换 至 【本 地 驱动 器 】 选 项 卡 ， 选 择 要 上 传 的 文件 ， 如 图 30-27 
所 示 。 

EEC 在 左 侧 窗口 中 选中 需要 上 传 的 文件 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【上 载 】 
命令 ， 如 图 30-28 所 示 。 

EEC 这 时 ， 在 窗口 的 下 方 窗 格 中 将 显示 文件 上 传 的 进度 以 及 上 传 的 状态 ， 如 图 30-29 
所 示 。 
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图 30-28 开始 上 传 文件 图 30-29 文件 上 传 的 进度 
上 传 完成 后 ， 用 户 即 可 在 外 部 进行 查看 ， 如 图 30-30 所 示 。 
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30.4” 跟 我 练 练 手 
30.4.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 
30.4.2 上 机 练习 


练习 1: 测试 网 站 。 
练习 2: 上 传 网 站 。 


30.5 高 手 甜点 


甜点 1: 正确 上 传 文件 


上 传 网 站 的 文件 需要 遵循 两 个 原则 ， 首先， 要 确定 上 传 的 文件 一 定 会 被 网 站 使 用 ， 不 要 
上 传 无 关 紧 要 的 文件 ， 并 尽量 缩小 上 传 文件 的 大 小 ; 其 次 ， 上 传 的 图 片 要 尽量 采用 压缩 格 
式 ， 这 样 不 仅 可 以 节省 服务 器 的 资源 ， 而 且 可 以 提高 网 站 的 访问 速度 。 

甜点 2: 设置 网 页 自动 关闭 


如 果 希 望 网 页 在 指定 的 时 间 内 能 自动 关闭 ， 可 以 在 网 页 源 代 码 的 标签 后 面 加 入 如 下 
代码 。 


<script LANGUAGE="JavaScript"> 
setTimeout ("self.close()",5000) 
</script> 


代码 中 的 5000 表示 5 秒 钟 ， 它 是 以 毫秒 为 单位 的 。 
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31.1 网 站 维护 基础 知识 
在 学 习 网 站 安全 与 防御 策略 之 前 ， 用 户 需要 了 解 些 网 站 的 基础 知识 。 
31.1.1 网 站 的 维护 与 安全 


网 站 安全 的 基础 是 系统 及 平台 的 安全 ， 只 有 在 做 好 系统 及 平台 的 安全 工作 后 才能 保证 网 
站 的 安全 。 目 前 ， 随 着 网 站 数量 的 增多 ， 以 及 编写 网 站 代码 的 程序 语言 也 在 不 断 地 更 新 ， 致 
使 网 站 漏洞 不 断 出 新 ， 黑 客 攻击 手段 不 断 变 化 ， 让 用 户 防不胜防 ， 但 用 户 可 以 以 不 变 应 万 
变 ， 从 如 下 几 个 方面 来 防范 网 站 的 安全 。 

目前 ， 每 个 网 站 的 服务 器 空间 并 不 都 是 自己 的 。 因 为 ， 一 些小 公司 没有 经 济 实力 购买 自 
己 的 服务 器 ， 它 们 只 能 去 租 别人 的 服务 器 。 对 于 不 同 地 方 的 网 站 服务 器 空间 ， 其 网 站 防范 措 
施 也 不 尽 相同 。 


1. 网 站 服务 空间 是 租用 的 


针对 这 种 情况 ， 网 站 管理 员 只 能 在 保护 网 站 的 安全 方面 下 功夫 ， 即 在 网 站 开发 这 块 做 一 
些 安全 工作 。 

(1) 网 站 数据 库 的 安全 。 一 般 SQL 注入 攻击 主要 是 针对 网 站 数据 库 的 ， 所 以 需要 在 数据 
库 连 接 文件 中 添加 相应 防 攻击 的 代码 。 例 如 ， 在 检查 网 站 程序 时 ， 打 开 那 些 含有 数据 库 操作 
的 ASP 文件 ， 这 些 文件 是 需要 防护 的 页 面 ， 然 后 在 其 头 部 加 上 相关 的 防 注入 代码 ， 于 是 这 些 
页 面 就 能 防 注入 了 ， 最 后 再 把 它们 都 上 传 到 服务 器 上 。 

(2) 堵 住 数据 库 下 载 漏洞 。 换 句 话说 就 是 不 让 别人 下 载 数据 库 文件 ， 并 且 数 据 库 文件 的 命 
名 最 好 复杂 并 隐藏 起 来 ， 让 别人 认 不 出 来 。 

(3) 网 站 中 最 好 不 要 有 上 传 和 论坛 程序 。 因 为 这 样 最 容易 产生 上 传 文件 漏洞 以 及 其 他 网 站 
漏洞 。 

(4) 后 台 管理 程序 。 对 于 后 台 管 理 程序 的 要 求 是 : 首先 不 要 在 网 页 上 显示 后 台 管 理 程序 的 
入 口 链接 ， 防 止 黑客 攻击 ;其 次 就 是 用 户 名 和 密码 不 能 过 于 简单 且 要 定期 更 换 。 

(5) 定期 检查 网 站 上 的 木马 。 使 用 某 些 专门 木马 查 杀 工具 ， 或 使 用 网 站 程序 集成 的 监测 工 
具 定 期 检查 网 站 上 是 否 存在 木马 。 

除 以 上 工作 外 ， 还 可 以 把 网 站 上 的 文件 除了 数据 库 文 件 外 ， 都 改 成 只 读 的 属性 ， 以 防止 
文件 被 算 改 。 


2. 网 站 服务 空间 是 自己 的 

针对 这 种 情况 ， 除 了 采用 上 述 几 点 对 网 站 安全 进行 防范 外 ， 还 要 对 网 站 服务 器 的 安全 进 
行 防范 。 这 里 以 Windows+IIS 实现 的 平台 为 例 ， 需 要 做 到 如 下 几 点 。 

(1) 服务 器 的 文件 存储 系统 要 使 用 NTFS 文件 系统 ， 因 为 在 对 文件 和 目录 进行 管理 方面 ， 
NTFS 系统 更 安全 有 效 。 


Go 


(2) 关闭 默认 的 共享 文件 。 

(3) 建立 相应 的 权限 机 制 ， 以 最 小 化 权限 的 原则 分 配给 Web 服务 器 访问 者 。 

(4) 删除 不 必要 的 虚拟 目录 、 和 危险 的 HS 组 件 和 不 必要 的 应 用 程序 映射 。 

(5) 保护 好 日 志文 件 的 安全 ， 因 为 日 志文 件 是 系统 安全 策略 的 一 个 重要 环节 ， 可 以 通过 对 
日 记 的 查看 ， 及 时 发 现 并 解决 问题 ， 确 保 日 志文 件 的 安全 能 有 效 提高 系统 整体 安全 性 。 


31.1.2 ”常见 网 站 攻击 方式 


网 站 攻击 的 手段 极其 多 样 ， 黑 客 常用 的 网 站 攻击 手段 主要 有 如 下 几 种 。 
1. 阻塞 攻击 


阻塞 类 攻击 手段 典型 的 攻击 方法 是 拒绝 服务 攻击 (Denial of Service，DOS)， 即 攻击 者 想 办 
法 让 目标 机 器 停止 服务 。 攻 击 成 功 后 的 后 果 为 使 目标 系统 死机 、 使 端口 处 于 停顿 状态 等 ， 还 
可 以 在 网 站 服务 器 中 发 送 杂 乱 信 息 、 改 变 文件 名 称 、 删 除 关键 的 程序 文件 等 ， 进 而 扭曲 系统 
的 资源 状态 ， 使 系统 的 处 理 速度 降低 。 


2. 文件 上 传 漏洞 攻击 


网 站 的 上 传 漏洞 根据 在 网 页 文件 上 传 的 过 程 中 对 其 上 传 变量 的 处 理 方式 的 不 同 ， 可 分 为 
动力 型 和 动 网 型 两 种 。 其 中 ， 动 网 型 上 传 漏洞 是 因为 编程 人 员 在 编写 网 页 时 未 对 文件 上 传 路 
径 变 量 进行 任何 过 滤 就 允许 进行 上 传 而 产生 的 漏洞 ， 用 户 可 以 对 文件 上 传 路 径 变 量 进行 任意 
修改 。 动 网 型 上 传 漏洞 最 早出 现在 动 网 论坛 中 ， 其 危害 性 极 大 ， 使 很 多 网 站 都 遭受 攻击 。 而 
动力 型 上 传 漏洞 是 因为 网 站 系统 没有 对 上 传 变量 进行 初始 化 ， 在 处 理 多 个 文件 上 传 时 ， 可 以 
将 ASP 文件 上 传 到 网 站 目录 中 而 产生 的 漏洞 。 

上 传 漏洞 攻击 方式 对 网 站 安全 威胁 极 大 ， 攻 击 者 可 以 直接 上 传 ASP 木马 文件 等 从 而 得 到 
一 个 WEBSHELL， 进 而 控制 整个 网 站 服务 器 。 


3. 跨 站 脚本 攻击 


跨 站 脚本 攻击 一 般 是 指 黑客 在 远程 站 点 页 面 HTML 代码 中 插入 具有 恶意 目的 的 数据 。 用 
户 认为 该 页 面 是 可 信赖 的 ， 但 当 浏览 器 下 载 该 页 面 时， 嵌入 其 中 的 脚本 将 被 解释 执行 。 跨 站 
脚本 攻击 方式 最 常见 的 是 通过 窃取 cookie 或 欺骗 打开 木马 网 页 等 ， 以 取得 重要 的 资料 ， 也 可 
以 直接 在 存在 跨 站 脚本 漏洞 的 网 站 中 写 入 注入 脚本 代码 、 在 网 站 挂 上 木马 网 页 等 。 


4. 弱 密 码 的 入 侵 攻击 


这 种 攻击 方式 首先 需要 用 扫描 器 探测 到 SQL 账号 和 密码 信息 ， 进 而 拿 到 SA 密码 ， 然 后 
用 SQLEXEC 等 攻击 工具 通过 1433 端口 连接 到 网 站 服务 器 上 ， 再 开设 系统 账号 ， 通 过 3389 
端口 登录 。 这 种 攻击 方式 还 可 以 配合 WEBSHELL 来 使 用 ， 一 般 的 ASP+MSSQL 的 网 站 通常 
会 把 MSSQL 连接 密码 写 到 一 个 配置 文件 当中 ， 可 以 用 WEBSHELL 来 读 取 配 置 文件 里 面 的 
SA 密码 ， 然 后 上 传 一 个 SQL 木马 来 获取 系统 的 控制 权限 。 
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5. 网 站 旁 注 入 侵 


这 种 技术 是 通过 IP 绑 定 域名 查询 的 功能 查 出 服务 器 上 有 多 少 网 站 ， 再 通过 一 些 薄 弱 的 网 
站 实施 入 侵 ， 拿 到 权限 之 后 转 而 控制 服务 器 的 其 他 网 站 。 


6. 网 站 服务 器 漏洞 攻击 


网 站 服务 器 的 漏洞 主要 集中 在 各 种 网 页 中 。 由 于 网 页 程序 编写 得 不 严谨 ， 因 而 出 现 了 各 
种 脚本 漏洞 ， 如 文件 上 传 漏洞 、Cookie 欺骗 漏洞 等 。 但 除了 这 几 类 常见 的 脚本 漏洞 外 ， 还 有 
一 些 专门 针对 某 些 网 站 程序 出 现 的 脚本 程序 漏洞 ， 最 常见 的 有 用 户 对 输入 的 数据 过 滤 不 严 、 
网 站 源 代码 暴露 、 远 程 文件 包含 漏洞 等 。 

利用 这 些 漏洞 需要 用 户 有 一 定 的 编程 基础 。 现 在 网 络 上 随时 都 有 最 新 的 脚本 漏洞 发 布 ， 
也 有 专门 的 工具 ， 初 学 者 完全 可 以 利用 这 些 工 具 进行 攻击 。 


31.2 ”网 站 安全 防御 策略 
在 了 解 了 网 站 安全 基础 知识 后 ， 下 面 介 绍 网 站 安全 防御 策略 。 
31.2.1 案例 1 一 一 检测 上 传 文件 的 安全 性 


服务 器 提供 了 多 种 服务 项 目 ， 其 中 上 传 文件 是 其 提供 的 最 基本 的 服务 项 目 。 它 可 以 让 空 
间 的 使 用 者 自由 上 传 文件 ， 但 是 在 上 传 文件 的 过 程 中 ， 很 多 用 户 可 能 会 上 传 一 些 对 服务 器 造 
成 致命 打击 的 文件 ， 如 最 常见 的 ASP 木马 文件 。 所 以 网 络 管理 员 必须 利用 入 侵 检测 技术 来 检 
测 网 页 木马 是 否 存 在 ， 以 防止 随时 随地 都 有 可 能 发 生 的 安全 隐患 ，“ 思 易 ASP 木马 追捕 ”就 
是 一 个 很 好 的 检测 工具 ， 通 过 该 工具 可 以 检测 到 网 站 中 是 否 存 在 ASP 木马 文件 。 
下 面 来 介绍 使 用 思 易 ASP 木马 追捕 来 检测 上 传 文件 是 否 为 木马 的 过 程 ， 其 具体 操作 步 又 
如 下 。 
下 载 思 易 ASP 木马 追捕 2.0 源 文件 ， 并 将 asplist2.0.asp 文件 存放 在 IIS 默认 目录 
H:\Inetpub\Wwwwroot 下 ， 然 后 在 【计算 机 管理 】 窗 口中 双击 【Intemet 信息 服务 管理 
器 】 选 项 ， 打 开 【Intemet 信息 服务 】 窗 口 。 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【 浏 
览 】 命 令 ， 如 图 31-1 所 示 。 
EED) 在 打开 的 窗口 中 可 以 看 到 添加 到 H:\InetpubWwwwroot 目录 下 的 asplist2.0.asp 文 
件 , 在 正 浏览 器 中 打开 该 网 页 ， 在 【检查 的 文件 类 型 】 文 本 框 中 输入 思 易 ASP 木 
马 追 捕 可 以 检查 的 文件 类 型 ， 主 要 包括 ASP、JPG、ZIP 在 内 的 许多 种 文件 类 型 ， 默 
认 是 检查 所 有 类 型 。 在 【增加 搜索 自 定义 关键 字 】 文 本 框 中 输入 确定 ASP 木马 文件 
所 包含 的 特征 字符 ， 以 增加 木马 检查 的 可 靠 性 ， 关 键 字 用 “,” 隔 开 ， 如 图 31-2 
所 示 。 
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31-1 选择 【浏览 】 命 令 31-2 打开 asplist2.0.asp 文件 


EEJep 在 【所 在 目录 】 中 列 出 了 当前 浏览 器 的 目录 ， 上 面 显示 的 是 该 目录 包含 的 子 目 
录 ， 下 面 显示 的 是 该 目录 的 文件 。 此 时 单 击 目 录 列 表 中 的 目录 可 以 检查 相应 的 目 
录 ， 而 单 击 【 回 上 级 目录 】 链 接 即 可 返回 到 当前 目录 的 上 一 级 目录 ， 如 图 31-3 所 示 。 

EEC》 在 设置 好 【检查 的 文件 类 型 】 和 【增加 搜索 自 定义 关键 字 】 属 性 后 ， 单 击 【 确 
定 】 按 钮 ， 根 据 设置 进行 网 页 木马 的 探测 ， 如 图 31-4 所 示 。 
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下 页 扫 行 着 3 3 受 检 不 页 和 行 共同 了 745 9 台 和 


图 31-3 ”网 页 预览 效果 图 31-4 ”网 页 木马 探测 结果 


ED 在 思 易 ASP 木马 追捕 工具 中 可 以 查看 目录 下 的 每 一 份 文件 ， 正 常 的 网 页 文件 一 
般 不 会 支持 删除 、 新 建 、 移 动 文件 的 操作 。 如 果 检 测 出 来 的 文件 支持 删除 、 新 建 操 
作 或 同时 支持 多 种 组 件 的 调用 ， 则 可 以 确定 该 文件 为 木马 病毒 ， 直 接 删除 即 可 。 

其 中 各 个 参数 的 含义 如 下 。 

(1) FSO: FSO 组 件 ， 具 有 远程 删除 、 新 建 、 修 改 文件 或 文件 夹 的 功能 。 

(2) 删 : 可 以 在 线 删 除 文件 或 文件 夹 。 

(3) 建 : 可 以 在 线 新 建文 件 或 文件 夹 。 

(4) 移 : 可 以 在 线 移 动 文件 或 文件 夹 。 
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(5) 流 : 是 否 调用 Adodb.stream。 

(6) Shell: 是 否 调用 Shell，Shell 是 微软 对 一 些 常用 外 壳 操 作 函 数 的 封装 。 
(7) WS: 是 否 调用 WSCIPT 组 件 。 

(8) XML: 是 否 调用 XMLHTTP 组 件 。 

(9) 密 : 网 页 源 文件 是 否 加 密 。 


31.2.2 ”案例 2 一 一 设置 网 站 访问 权限 


限制 用 户 的 网 站 访问 权限 往往 可 以 有 效 堵 住 入 侵 者 的 上 传 。 可 在 IIS 服务 管理 器 中 进行 用 
户 访问 权限 设置 ， 还 可 设置 网 站 目录 下 的 文件 访问 控制 权限 ， 赋 予 IS 网 站 访问 用 户 相应 的 权 
限 ， 才 能 正常 浏览 网 站 网 页 文档 或 访问 数据 库 文 件 。 对 于 后 绥 为 asp、.html、.php 等 的 网 页 文 
档 文件 ， 设 置 网 站 访问 用 户 对 这 些 文件 可 读 即 可 。 
设置 网 站 访问 权限 的 具体 操作 步骤 如 下 。 
EED) 在 资源 管理 器 中 右 击 Di\inetpub 中 的 www.***.com 目录 ， 在 弹出 的 快捷 菜单 中 
选择 【属性 】 命 令 ， 在 打开 的 对 话 框 中 切换 到 【安全 】 选 项 卡 ， 如 图 31-5 所 示 。 
EEI2 在 【组 或 用 户 名 】 列 表 框 中 选择 任意 一 个 用 户 名 ， 然 后 单 击 【编辑 】 按 钮 ， 打 
开 权 限 对 话 框 ， 如 图 31-6 所 示 。 
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31-5 【安全 】 选 项 卡 31-6 ”权限 对 话 框 
EEJS 单 击 【 添 加 】 按钮 ， 打 开 【 选 择 用 户 或 组 】 对 话 框 ， 在 其 中 输入 用 户 Everyone， 如 


图 31-7 所 示 。 
EC 单 击 【 确 定 】 按 钮 ， 返 回 文件 夹 属性 对 话 框 中 可 看 到 已 将 Everyone 用 户 添加 到 
列表 框 中 ， 如 图 31-8 所 示 。 单 击 【 确 定 】 按 钮 ， 即 可 完成 设置 。 
另外 ， 在 网 页 文件 夹 中 还 有 数据 库 文件 的 权限 需要 进行 特别 设置 。 因 为 用 户 在 提交 表单 
或 进行 注册 等 操作 时 ， 会 修改 数据 库 的 数据 ， 所 以 除 给 用 户 读 取 的 权限 外 ， 还 需要 写 入 和 修 
改 权限 ， 否 则 也 会 出 现 用 户 无 法 正常 访问 网 站 的 问题 。 
设置 网 页 数据 库 文件 权限 的 操作 方法 如 下 : 右 击 文件 夹 中 的 数据 库 文件 ， 在 弹出 的 快捷 
菜单 中 选择 【属性 】 命 令 ， 在 打开 的 属性 对 话 框 中 切换 到 【安全 】 选 项 卡 ， 在 【组 或 用 户 


名 】 列 表 框 中 选择 Eveyone 用 户 ， 在 权限 列表 框 中 再 选择 【修改 】、【 写 入 】 权 限 。 


[ss 


于 象 各 称 。 Vinetpabvwmrootviisstart htn 


31-7 【选择 用 户 或 组 】 对 话 框 图 31-8 文件 夹 属性 对 话 框 


31.3” 跟 我 练 练 手 


31.3.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 


31.3.2 上 机 练习 


练习 1: 检测 上 传 文件 的 安全 性 。 
练习 2: 设置 网 站 访问 权限 。 


31.4 高 手 甜 点 


甜点 1: 网 站 硬件 的 维护 


硬件 中 最 主要 的 就 是 服务 器 ， 一 般 要 求 使 用 专用 的 服务 器 ， 不 要 使 用 PC 代替 。 因 为 专用 
的 服务 器 中 有 多 个 CPU， 并 且 硬 盘 的 各 方面 的 配置 也 比较 优秀 ， 如 果 其 中 一 个 CPU 或 硬盘 坏 
了 ， 别 的 CPU 和 硬盘 还 可 以 继续 工作 ， 不 会 影响 到 网 站 的 正常 运行 。 

网 站 机 房 通常 要 注意 室内 的 温度 、 湿 度 及 通风 性 ， 这 些 将 影响 到 服务 器 的 散热 和 性 能 的 
正常 发 挥 。 如 果 有 条 件 ， 最 好 使 用 两 台 或 两 台 以 上 的 服务 器 ， 所 有 的 配置 最 好 都 是 一 样 的 。 
因为 服务 器 经 过 一 段 时 间 要 进行 停机 检修 ， 在 检修 的 时 候 可 以 用 别 的 服务 器 工作 ， 这 样 不 会 
影响 到 网 站 的 正常 运行 。 

甜点 2: 网 站 软件 的 维护 


软件 管理 也 是 确保 一 个 网 站 能 够 良好 运行 的 必要 条 件 ， 通 常 包 括 服务 器 的 操作 系统 配 
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置 、 网 站 的 定期 更 新 、 数 据 的 备份 、 网 络 安全 的 防护 等 。 

(1) 服务 器 的 操作 系统 配置 。 

一 个 网 站 要 能 正常 运行 ， 硬 件 环境 是 一 个 先决 条 件 。 但 是 服务 器 操作 系统 的 配置 是 否 可 
行 和 设置 的 优良 性 如 何 ， 则 是 一 个 网 站 能 否 良 好 长 期 运行 的 保证 。 除 了 要 定期 对 这 些 操作 系 
统 进行 维护 外 ， 还 要 定期 对 操作 系统 进行 更 新 ， 使 用 最 先进 的 操作 系统 。 一 般 来 说 ， 操 作 系 
统 中 软件 安装 的 原则 是 少 而 精 ， 就 是 在 服务 器 中 安装 的 软件 应 尽 可 能 地 少 ， 只 要 够 用 即 可 ， 
这 样 可 防止 各 个 软件 之 间 相 互 冲突 。 因 为 有 些 软件 还 是 不 健全 的 、 有 漏洞 的 ， 还 需要 进一步 
的 完善 ， 所 以 安装 得 越 多 ， 潜 在 的 问题 和 漏洞 也 就 越 多 。 

(2) 网 站 的 定期 更 新 。 

网 站 的 创建 并 不 是 一 成 不 变 的 ， 还 要 对 网 站 进行 定期 的 更 新 。 除 了 更 新 网 站 的 信息 外 
还 要 更 新 或 调整 网 站 的 功能 和 服务 。 对 网 站 中 的 废旧 文件 要 随时 清除 ， 以 提高 网 站 的 精良 
性 ， 从 而 提高 网 站 的 运行 速度 。 不 要 以 为 网 站 上 传 、 运 行 后 便 万 事 大 吉 ， 与 自己 无 关 了 。 要 
多 光顾 自己 的 网 站 ， 作 为 一 个 旁观 者 来 客观 地 看 待 自 己 的 网 站 ， 评 价 自己 的 网 站 与 别 的 优秀 
网 站 相 比 还 有 哪些 不 足 。 有 时 自己 分 析 自 己 的 网 站 往往 比 别人 更 能 发 现 问题 ， 然 后 再 进一步 
地 完善 自己 网 站 中 的 功能 和 服务 。 还 有 就 是 要 时 时 关注 互联 网 的 发 展 趋势 ， 随 时 调整 自己 的 
网 站 ， 使 其 顺应 潮流 ， 以 便 给 别人 提供 更 便捷 和 贴切 的 服务 。 

(3) 数据 的 备份 。 

所 谓 数据 的 备份 ， 是 指 对 自己 网 站 中 的 数据 进行 定期 备份 ， 这 样 既 可 以 防止 服务 器 出 现 
突 发 错误 丢失 数据 ， 又 可 以 防止 自己 的 网 站 被 别人 “ 黑 ” 掉 。 如 果 有 了 定期 的 网 站 数据 备 
份 ， 那 么 即使 自己 的 网 站 被 别人 “ 黑 ” 掉 了 ， 也 不 会 影响 网 站 的 正常 运行 。 

(4) 网 络 安全 的 防护 。 

所 谓 网 络 的 安全 防护 ， 是 指 防止 自己 的 网 站 被 别人 非法 地 侵入 和 破坏 。 除 了 要 对 服务 器 
进行 安全 设置 外 ， 首 要 的 一 点 是 要 注意 及 时 下 载 和 安装 软件 的 补丁 程序 。 此 外 ， 还 要 在 服务 
器 中 安装 、 设 置 防火 墙 。 防 火 墙 虽然 是 确保 安全 的 一 个 有 效 措施 ， 但 不 是 唯一 的 ， 也 不 能 确 
保 绝对 安全 ， 为 此 ， 还 应 该 使 用 其 他 安全 措施 。 另 外 一 点 就 是 要 时 刻 注意 病毒 的 问题 ， 要 时 
刻 对 自己 的 服务 器 进行 查 毒 、 杀 毒 等 操作 ， 以 确保 系统 的 安全 运行 。 

随 着 网 络 的 飞速 发 展 ， 网 络 上 的 不 安全 因素 也 越 来 越 多 ， 所 以 有 必要 保护 网 络 的 安全 。 
在 操作 计算 机 的 同时 ， 要 采用 一 定 的 安全 策略 和 防护 方法 ， 如 提高 网 络 的 安全 意识 ， 要 做 到 
不 随意 透露 密码 ， 尽 量 不 用 生日 或 电话 号 码 等 容易 被 破解 的 信息 作为 密码 ， 经 常 更 换 密码 ， 
禁用 不 必要 的 服务 。 在 操作 计算 机 时 ， 显 示 器 上 常常 会 出 现 一 些 不 需要 的 信息 ， 应 根据 实际 
情况 禁用 一 些 不 必要 的 服务 ， 安 装 一 些 对 计算 机 能 起 到 保护 作用 的 程序 等 。 


品 一 样 ， 再 优秀 的 网 站 


广 一 个 网 站 ， 坐 等 访客 的 光临 是 不 行 的 。 放 在 互联 网 上 的 网 站 就 像 一 块 


立 在 地 下 走道 中 的 公告 牌 一 样 ， 即 使 人 们 在 走道 里 走动 的 次 数 很 多 ， 但 是 往往 也 很 


难 发 现 这 个 公告 牌 ， 可 见 宣传 网 站 有 多 么 重要 。 就 像 任何 产 


如 果 不 进 行 自我 宣传 ， 也 很 难 有 较 大 的 访问 量 。 
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32.1 在 网 站 中 添加 广告 


通过 在 网 站 中 适当 地 添加 广告 信息 ， 可 以 给 网 站 的 拥有 者 带 来 不 小 的 收入 。 随 着 点 击 量 
的 上 升 ， 创 造 的 财富 也 增多 。 


32.1.1 网 站 广告 的 分 类 


网 站 广告 设计 更 多 的 时 候 是 通过 烦琐 的 工作 与 多 次 的 尝试 完成 的 。 在 实际 工作 中 ， 网 页 
设计 者 会 根据 需要 添加 不 同类 型 的 网 站 广告 。 网 站 广告 的 形式 大 致 分 为 以 下 几 种 。 

1. 网 幅 式 广告 

网 幅 式 广告 又 称 旗帜 广告 ， 通 常 横向 出 现在 网 页 中 ， 最 常见 的 尺寸 是 468 像素 x60 像素 
和 468 像素 x80 像素 ， 目 前 还 有 728 像素 x90 像素 的 大 尺寸 型 ， 是 网 络 上 比较 早出 现 的 一 种 广 
告 形式 ， 如 图 32-1 所 示 。 该 广告 以 往 以 jpg 或 者 gif 格式 为 主 ， 伴 随 着 网 络 的 发 展 ，swf 格式 的 
网 幅 广 告 也 比较 常见 了 

2. 弹出 式 广告 

弹出 式 广告 是 互联 网 上 的 一 种 在 线 广告 形式 ， 意 图 透 过 广告 来 增加 网 站 流量 。 用 户 进入 
网 页 时 ， 会 自动 开启 一 个 新 的 浏览 器 视窗 ， 以 吸引 读者 直接 到 相关 网 址 浏览 ， 从 而 收 到 宣传 
之 效 。 这 些 广告 一 般 都 透 过 网 页 的 JavaScript 指令 来 启动 ， 但 也 有 通过 其 他 形式 启动 的 。 由 于 
弹出 式 广告 过 分 泛滥 ， 很 多 浏览 器 或 者 浏览 器 组 件 都 加 入 了 弹出 式 窗口 杀手 的 功能 ， 以 屏蔽 
这 样 的 广告 ， 如 图 32-2 所 示 。 


Es jy 
E Ej 
ND 
图 32-1 网 幅 式 广告 图 32-2 弹出 式 广告 


3. 按钮 式 广告 

按钮 式 广告 是 一 种 小 面积 的 广告 形式 ， 如 图 32-3 所 示 。 这 种 广告 形式 被 开发 出 来 主要 有 
两 个 原因 : 一 方面 可 以 通过 减 小 面积 来 降低 购买 成 本 ， 让 小 预算 的 广告 主 有 能 力 购 买 ， 另 一 
方面 是 为 了 更 好 地 利用 网 页 中 比较 小 面积 的 零散 空白 位 。 

常见 的 按钮 式 广告 有 125 像素 x125 像素 、120 像素 x90 像素 、120 像素 x60 像素 、88 像 
素 x314 像素 4 种 尺寸 。 在 购买 的 时 候 ， 广 告 主 也 可 以 购买 连续 位 置 的 几 个 按钮 式 广告 组 成 双 
按钮 广告 、 三 按钮 广告 等 ， 以 加 强 宣传 效果 。 按 钮 式 广 告 一 般 容量 比较 小 ， 常 见 的 有 JPEG、 
GIF、Flash 3 种 格式 。 


4. 文字 链接 广告 
文字 链接 广告 是 一 种 最 简单 直接 的 网 上 广告 ， 只 需要 将 超 链 接 加 入 相关 文字 便 可 ， 如 图 32-4 


所 示 。 
1 运动 户外 到 
运动 圣 跑步 板鞋 语 球 帆布 和 \ 


古 体 健身 死 飞 泳衣 跑步 机 加 中 
户外 服 钓鱼 鞋 福 照明 速 干 衣 


| 运动 最 套装 汶 子 POLO 1 曲 车 情 一 看, 达 人 
© 电脑 客户 二 表 包 单 肩 包 军 迷 帐 庄 品牌 括 权 


02 耐克 阿迪 361 安息 李宁 ERKE “ 
32-3 按钮 式 广告 32-4 文字 链接 广告 


5. 横幅 式 广告 

横幅 式 广告 是 通栏 式 广告 的 初步 发 展 阶段 ， 初 期 用 户 认可 程度 很 高 ， 有 不 错 的 效果 。 但 
是 伴随 着 时 间 的 推移 ， 人 们 对 横幅 式 广告 已 经 开始 变 得 麻木 ， 于 是 广告 主 和 媒体 开发 了 通栏 
式 广告 ， 它 比 横幅 式 广告 更 长 ， 面 积 更 大 ， 更 具有 表现 力 ， 更 吸引 人 。 一 般 的 通栏 式 广告 尺 
寸 有 590 像素 x105 像素 、590 像素 x80 像素 等 ， 已 经 成 为 一 种 常见 的 广告 形式 ， 如 图 32-5 
所 示 。 


6. 浮动 式 广告 
浮动 式 广告 是 网 页 页 面 上 悬浮 或 移动 的 非 鼠 标 响应 广告 ， 可 以 为 Gif 或 Flash 等 格式 ， 如 
图 32-6 所 示 。 
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图 32-5 ”横幅 式 广告 图 32-6 浮动 式 广告 
32.1.2 ”添加 网 站 广告 


网 站 广告 的 种 类 很 多 ， 下 面 以 添加 浮动 式 广告 为 例 ， 讲 解 如 何在 网 站 上 添加 广告 。 具 体 
操作 步骤 如 下 。 

EEC 启动 Dreamweaver CS6， 打 开 随 书 光盘 中 的 “chl9\index.htm” 文 件 ， 如 图 32-7 
所 示 。 
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EGRP9 单 击 【人 代码】 按钮 ， 将 下 面 的 代码 复制 到 </body> 之 前 的 位 置 。 


<div id="ad" style="position:absolute"><a href="http://www.baidu.com"> 
<img src="images/ 星 座 .jpg" border="0"></a> 
</div> 
<script language="javascript"> 
var x = 50,y = 60 
Var xin = true, yin = true 
Var step = 1 
var delay = 10 
Var obj=document .getElementById ("ad") 
function floatAD() { var L=T=0 
Var R= document .body.clientWidth-obj.offsetWidth 
Var B = document .body.clientHeight-obj.offsetHeight 
obj.style.left = x + document.body.scrollLeft 
obj.style.top = Y + document .body.scrollTop 
X= XxX+ step*(xin?1:-1) 


43£ (x < LY { 31in = truer z= LL} 
if (x > R){ xin = false; x = R} 
Y= y+ step*(yin?1:-1) 

if (y < T) { yin = true; y= T})} 


if (y > B) { yin = false; y= B}} 
var itl= setInterval ("floatAD()", delay) 
obj .onmouseover=function() {clearInterval (it1)} 
obj .onmouseout=function() {itl=setInterval ("floatAD()", delay)} 


ECDIS 保存 网 页 ， 然 后 在 浏览 器 中 浏览 网 页 ， 如 图 32-8 所 示 。 
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图 32-7 打开 素材 文件 图 32-8 ”预览 网 页 


32.2 ”添加 实用 查询 工具 


在 制作 好 的 网 页 中 ， 还 可 以 添加 一 些 实用 查询 工具 ， 如 天 气 预报 、IP 查询 、 万 年 历 、 列 
车 时 刻 查询 等 。 
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32.2.1 添加 天 和 气 预 报 二 

增 

在 网 页 中 添加 天 气 预报 的 具体 操作 步骤 如 下 。 加 

ECGD 打开 随 书 光盘 中 的 “ch19\ 网 址 导航 html” 文 件 ， 选 择 文字 “天 气 ”， 如 图 32-9 ” 击 

所 示 。 1 

TY 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 http://www.weather.com.cn/， 如 图 32-10 网 

所 示 。 站 

过 | | 
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图 32-9 选择 文字 “天 气 ” 32-10 在 【属性 】 面 板 中 输入 链接 地 址 


EERB) 保存 文件 ， 按 F12 键 预览 ， 然 后 单 击 文字 “天 气 ”， 页 面 就 会 跳 转 到 天 气 查询 
页 面 ， 如 图 32-11 所 示 。 


32-11 天气 查询 页 面 


32.2.2 添加 IP 查询 


在 网 页 中 添加 了 P 查询 的 具体 操作 步骤 如 下 。 
EDp 打开 随 书 光盘 中 的 “素材 \ch28\ 网 址 导航 .html” 文 件 ， 选 择 文字 “IP”， 如 
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图 32-12 所 示 。 
ERP9 在 【属性 】 面板 的 【链接 】 文 本 框 中 输入 http:/www.ip138.com/， 如 图 32-13 所 示 。 
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图 32-12 ”选择 文字 “IP” 


32-13 ”在 【属性 】 面 板 中 输入 链接 地 址 
EECBp 保存 文件 ， 按 F12 键 预览 ， 然 后 单 击 文字 “IP” 


后 ， 页 面 就 会 跳 转 到 IP 查询 页 
面 ， 如 图 32-14 所 示 。 


WE een p - scx] mess Fs.. 
tn MAD BR Cm TR Wi 
ip138. com 查询 同 


一 天 气 预 报 -预报 五 天 一 国内 刘表 音 询 下 手机 号 公所 在 旭 区 : 
下 于 人 全 说 如 查询 
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wmw. ip138. com IP 查 询 (搜索 IP 地 址 的 地 理 位 置 ) 


您 的 IF 是 ，[123.6. 259.100] 未 自 ， 河 南 省 郑州 市 联通 


F 查询 的 IP 地 址 ， 点 击 查 询 
A 和 


,- = 
ip138 志 业 7*24 小 时 为 写 服 务 
和 :本 YP 站 扣 诛 为 条 的 和 可 友 , 条 10 天 自动 更 站 一 次 


32-14 “IP 查询 页 面 


32.2.3 ”添加 万 年 历 


在 网 页 中 添加 万 年 历 的 具体 操作 步骤 如 下 。 


ET 打开 随 书 光 盘 中 的 “素材 ch28\ 网 址 导航 . htnl” 文件， 选择 文字 “万 年 历 ”， 如 
图 32-15 所 示 。 


四 TY 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 http://www.nonglinet/， 如 图 32-16 所 示 。 
EC) 保存 文件 ， 按 F12 键 预览 ， 然 后 单 击 文字 “万 年 历 ”， 页 面 就 会 跳 转 到 万 年 历 
查询 页 面 ， 如 图 32-17 所 示 。 


Dw ws | Dw | i x 
XIA Ri EW EAD PAM RI S(O SR BIW | zm as EM BA SaM Wo) #9 Hel SOM 八 


划 5 3 ry 

[me 

Re hl x me 
人 一 SETESERE 国 和 和- 


贺 乐 伯 采 
言 乐 视 须 游戏 电影 
新 闻 小 党 年 事 图 片 


-= 


生活 最 务 


Pr 
E33 


= -| Om| | 咏 开 四 淆 7] 严 元 EE ET 
md 本 cs。 nm Er 


[En [em | 


32-15 ”选择 文字 “万 年 历 ” 32-16 在 【属性 】 面 板 中 输入 链接 地 址 
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图 32-17 万 年 历 查询 页 面 
32.2.4 添加 列车 时 刻 查询 


在 网 页 中 添加 列车 时 刻 查 询 的 具体 操作 步骤 如 下 。 

EC 打开 随 书 光盘 中 的 “素材 \ch28\ 网 址 导航 .html” 文 件 ， 选 择 文字 “列车 时 刻 查 
询 ”， 如 图 32-18 所 示 。 

EDy 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 http://www.12306.cn/mormhweb/， 如 
图 32-19 所 示 。 

本 于 BY 保存 文件 ， 按 F12 键 预览 ， 然 后 单 击 文字 “列车 时 刻 查询 ”， 页 面 就 会 跳 转 到 
列车 时 刻 查询 页 面 ， 如 图 32-20 所 示 。 
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32-18 选择 文字 “列车 时 刻 查询 ” 32-19 在 【属性 】 面 板 中 输入 链接 地 址 
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图 32-20 列车 时 刻 查询 页 面 


32.3 ”网 站 的 宣传 与 推广 


网 站 做 好 后 ， 需 要 大 力 地 宣传 和 推广 ， 只 有 如 此 才能 让 更 多 人 知道 并 浏览 。 宣 传 广告 的 
方式 很 多 ， 包 括 利 用 大 众 传媒 、 网 络 传媒 、 电 子 邮 件 、 留 言 本 与 博客 、 论 坛 等 。 效 果 最 明显 
的 是 利用 网 络 传媒 的 方式 。 


32.3.1 网 站 宣传 实用 策略 


网 站 做 好 之 后 ， 需 要 进行 宣传 和 推广 ， 才 可 以 被 更 多 浏览 者 访问 ， 没 有 访问 量 的 网 站 显 
然 是 毫 无 意义 的 。 下 面 介 绍 一 些 比较 实用 的 网 站 宣传 技巧 。 

(D 利用 聊天 室 宣传 网 站 。 先 在 聊天 室 的 公告 中 对 所 有 人 进行 宣传 ， 然 后 再 对 每 个 聊天 室 
的 人 一 个 一 个 地 发 。 很 多 大 型 网 站 聊天 室 里 每 天 都 有 很 大 流量 的 聊天 人 员 ， 所 以 这 种 方法 见 
效 比较 快 。 但 是 需要 注意 的 是 : 因为 大 部 分 聊天 室 都 禁止 发 送 广告 性 质 的 信息 ， 所 以 在 语言 
上 需要 好 好 振 酌 才 行 。 一 般 情况 下 ， 不 要 和 聊天 室 的 管理 人 员 聊 天 ， 否 则 马上 会 被 赶 出 


聊天 室 。 

(2) 利用 搜索 引擎 宣传 网 站 。 搜 索引 擎 是 一 个 进行 信息 检索 和 查询 的 专门 网 站 。 很 多 网 站 
都 是 依靠 搜索 引擎 来 宣传 的 ， 因 为 很 多 网 上 浏览 者 都 会 在 搜索 引擎 中 查找 相关 信息 。 比 如 
很 多 人 都 习惯 利用 百度 搜索 信息 ， 所 以 如 果 在 百度 引擎 上 注册 你 的 网 站 ， 被 搜索 到 的 机 会 就 
很 大 。 当 然 ， 还 需要 好 好 研究 一 下 网 站 的 关键 字 ， 这 对 增 大 网 站 被 搜索 的 概率 很 重要 。 国 内 
此 类 网 站 很 多 ， 如 百度 、 网 易 、 搜 狐 、 中 文雅 虎 等 ， 填 份 表格 ， 就 能 成 功 注册 ， 以 后 浏览 者 
就 能 在 这 些 引 擎 中 查 到 相关 的 网 页 。 

(3) 利用 QQ 宣传 网 站 。 目 前 ， 很 多 网 页 浏览 者 都 有 自己 的 QQ， 所 以 利用 QQ 宣传 也 是 
一 个 比较 实用 的 方法 。 首 先 多 注册 几 个 QQ 号 码 ， 然 后 在 QQ 中 创建 不 同 的 分 组 ， 依 次 添加 
陌生 人 ， 开 始 宣传 网 站 ， 一 般 以 创业 为 向 导 ， 找 到 和 浏览 者 共同 的 兴趣 点 。 如 果 浏 览 者 感 兴 
趣 ， 则 继续 聊 下 去 ， 否 则 不 要 打扰 别人 ， 继 续 寻找 下 一 个 目标 。 根 据 以 往 的 网 站 宣传 经 验 ， 
这 种 方法 见效 比较 快 。 


32.3.2 ”利用 大 众 传媒 进行 推广 


大 众 传媒 通常 包括 电视 、 书 刊 报纸 、 户 外 广告 、 其 他 印刷 品 等 。 
1. 电视 


目前 ， 电 视 是 最 大 的 宣传 媒体 。 如 果 在 电视 中 做 广告 ， 一 定 能 收 到 像 其 他 电视 广告 商品 
一 样 家 喻 户 晓 的 效果 ， 但 对 个 人 网 站 而 言 就 不 太 适 合 了 。 
2.， 书刊 报纸 


报纸 是 仅 次 于 电视 的 第 二 大 媒体 ， 也 是 使 用 传统 方式 宣传 网 站 的 最 佳 途径 。 作 为 一 名 电 
脑 爱 好 者 ， 在 使 用 软 硬 件 和 上 网 的 过 程 中 ， 通 常 也 积累 了 一 些 值得 与 别人 交流 的 经 验 和 心 
得 ， 那 就 不 妨 将 它 写 出 来 ， 写 好 后 寄 往 像 《 电 脑 爱好 者 》 等 比较 著名 的 刊物 ， 从 而 让 更 多 人 
受益 。 可 以 在 文章 的 末尾 注 明 自己 的 主页 地 址 和 E-mail 地 址 ， 或 者 将 一 些 难以 用 书稿 方式 表 
达 的 内 容 放 在 自己 的 网 站 中 表达 。 如 果 文 章 很 受 欢 迎 ， 那 么 就 能 吸引 更 多 人 来 访问 自己 的 网 站 。 

Ey 

在 一 些 繁华 、 人 流量 大 的 地 段 的 广告 牌 上 做 广告 也 是 一 种 比较 好 的 宣传 方式 。 目 前 ， 在 
街头 、 地 铁 内 所 做 的 网 站 广告 就 说 明了 这 一 点 ， 但 这 种 方式 比较 适合 有 实力 的 商业 性 质 的 
网 站 。 

4. 其 他 印刷 品 

公司 信 得 、 名 片 、 礼 品 包装 等 都 应 该 印 上 网 址 名 称 ， 让 客户 在 记 住 你 的 名 字 、 职 位 的 同 
时 ， 也 能 看 到 并 记 住 你 公司 的 网 址 。 


32.3.3 ”利用 网 络 媒介 进行 推广 
由 于 网 络 广告 的 对 象 是 网 民 ， 具 有 很 强 的 针对 性 ， 因 此 ， 使 用 网 络 广告 不 失 为 一 种 较 好 
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的 宣传 方式 。 
1. 网 络 广告 


在 选择 网 站 做 广告 的 时 候 ， 需 要 注意 以 下 两 点 。 

(1) 应 选择 访问 率 高 的 门户 网 站 。 只 有 选择 访问 率 高 的 网 站 ， 才 能 达到 “ 广 而 告 之 ”的 
效果 。 

(2) 优秀 的 广告 创意 是 吸引 浏览 者 的 重要 手段 。 要 想 唤起 浏览 者 点 击 的 欲望 ， 就 必须 给 浏 
览 者 点 击 的 理由 。 因 此 ， 图 形 的 整体 设计 、 色 彩 和 图 形 的 动态 设计 以 及 与 网 页 的 搭配 等 都 
是 极其 重要 的 。 如 图 32-21 所 示 为 天 天 营养 网 的 首页 ， 在 其 中 就 可 以 看 到 添加 的 网 络 广 告 
信息 。 


2. 利用 电子 邮件 


这 个 方法 对 自己 熟悉 的 朋友 使 用 还 可 以 ， 或 者 在 主页 上 提供 更 新 网 站 邮件 订阅 功能 ， 这 
样 ， 在 自己 的 网 站 被 更 新 后 ， 便 可 通知 网 友 了 。 如 果 随 便 地 向 自己 不 认识 的 网 友 发 E-mail 宣 
传 自己 主页 的 话 ， 就 不 太 友 好 了 。 有 些 网 友 会 认为 那 是 垃圾 邮件 ， 以 至 于 给 网 友 留 下 不 好 的 
印象 ， 被 列 入 黑 名 单 或 拒 收 邮件 列表 内 。 这 样 对 提高 自己 网 站 的 访问 率 并 无 实质 性 帮助 ， 而 
且 若 未 经 别人 同意 就 三 番 五 次 地 发 出 一 样 的 邀请 信 ， 也 是 不 礼貌 的 。 

发 出 的 E-mail 邀请 信 要 有 诚意 ， 态 度 要 和 访 ， 并 将 自己 网 站 更 新 的 内 容 简 要 地 介绍 给 网 
友 。 倘 若 网 友 表示 不 愿意 再 收 到 类 似 的 信件 ， 就 不 要 再 将 通知 邮件 寄 给 他 们 了 。 如 图 32-22 
所 示 为 邮箱 登录 页 面 。 
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图 32-21 天 天 营养 网 图 32-22 邮箱 登录 页 面 
3. 使 用 留言 板 、 博 客 
处 处 留言 、 引 人 注意 也 是 一 种 很 好 的 宣传 自己 网 站 的 方法 。 在 网 上 浏览 、 访 问 别人 的 网 
站 时 ， 当 看 到 一 个 不 错 的 网 站 时 ， 可 以 考虑 在 这 个 网 站 的 留言 板 中 留 下 赞美 的 语句 ， 并 把 自 
己 网 站 的 简介 、 地 址 一 并 写 下 来 ， 将 来 其 他 人 留言 时 看 到 这 些 留言 ， 说 不 定 会 有 兴趣 到 你 的 
网 站 中 去 参观 一 下 。 
随 着 网 络 的 发 展 ， 现 在 诞生 了 许多 个 人 博客 ， 在 博客 中 也 可 以 留 下 你 宣传 网 站 的 语句 。 


还 有 一 些 是 商业 网 站 的 留言 板 、 博 客 等 ， 如 网 易 博客 等 ， 每 天 都 会 有 很 多 人 在 上 面 留言 ， 访 
问 率 较 高 ， 在 那里 留言 对 于 让 别人 知道 自己 的 网 站 的 效果 会 更 明显 。 如 图 32-23 所 示 为 网 易 
博客 的 首页 。 

留言 时 的 用 语 要 真诚 、 简 洁 ， 切 莫 将 与 主题 无 关 的 语句 也 写 在 上 面 。 篇 幅 要 尽量 简短 ， 
不 要 将 同一 篇 留言 反复 地 写 在 别人 的 留言 板 上 。 


4. 在 网 站 论坛 中 留言 


目前 ， 大 型 的 商业 网 站 中 都 有 多 个 专业 论坛 ， 有 的 个 人 网 站 上 也 有 论坛 ， 那 里 会 有 许多 
人 在 发 表 观 点 ， 在 论坛 中 留言 也 是 一 种 很 好 的 宣传 网 站 的 方式 。 如 图 32-24 所 示 为 天 涯 论坛 
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图 32-23 网 易 博客 图 32-24 天 涯 论坛 
32.3.4 利用 其 他 形式 进行 推广 


大 众 媒 体 与 网 络 媒体 是 比较 常见 的 网 站 推广 方式 。 下 面 再 来 介绍 几 种 其 他 形式 的 推广 
方式 。 


1. 注册 搜索 引擎 


在 知名 的 网 站 中 注册 搜索 引擎 ， 可 以 提高 网 站 的 访问 量 。 当 然 ， 很 多 搜索 引擎 (有 些 是 竞 
价 排名 ) 是 收费 的 ， 这 对 商业 网 站 可 以 使 用 ， 对 个 人 网 站 就 有 点 不 好 接受 了 。 如 图 32-25 所 示 
为 百度 网 站 的 企业 推广 首页 。 


2. 和 其 他 网 站 交换 链接 


对 个 人 网 站 来 说 ， 友 情 链接 可 能 是 最 好 的 宣传 网 站 的 方式 。 和 访问 量 大 的 、 优 秀 的 个 人 
网 页 相互 交换 链接 ， 能 大 大 地 提高 网 页 的 访问 量 。 如 图 32-26 所 示 为 某 个 网 站 的 友情 链接 
区 域 。 

这 个 方法 比 参加 广告 交换 组 织 要 有 效 得 多 ， 起 码 可 以 选择 将 广告 放置 到 哪个 网 页 。 能 
择 与 那些 访问 率 较 高 的 网 页 建立 友情 链接 ， 这 样 造访 网 页 的 网 友 肯 定 会 多 起 来 。 

友情 链接 是 相互 建立 的 ， 要 别人 加 上 链接 ， 也 应 该 在 自己 网 页 的 首页 或 专门 做 友情 链接 
的 专 页 放置 对 方 的 链接 ， 并 适当 地 进行 推荐 ， 这 样 才能 吸引 更 多 人 愿意 与 你 共 建 链接 。 此 
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外 ， 网 站 标志 要 制作 得 漂亮 、 醒 目 ， 使 人 一 看 就 有 兴趣 点 击 。 
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图 32-25 百度 推广 首页 图 32-26 ”网 站 友情 链接 


32.4 ”实战 演练 一 一 查看 网 站 的 流量 


添加 网 站 流量 统计 功能 可 以 在 整体 上 对 网 站 的 浏览 次 数 进行 统计 。 添 加 网 站 流量 统计 功 
能 并 查看 网 站 流量 的 具体 操作 步骤 如 下 。 
在 正 浏览 器 中 输入 网 址 http:/www.cnzz.com/， 打 开 CNZZ 数据 专家 网 的 主页 ， 
如 图 32-27 所 示 。 
ED 单 击 【免费 注册 】 按 钮 进行 注册 ， 根 据 提 示 输 入 相关 信息 ， 如 图 32-28 所 示 。 
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32-27 ”CNZZ 数据 专家 网 的 主页 32-28 ”注册 页 面 


EEe) 单 击 【同意 协议 并 注册 】 按 钮 ， 即 可 注册 成 功 ， 并 进入 【添加 站 点 】 页 面 ， 如 
图 32-29 所 示 。 

EC 在 【添加 站 点 】 页 面 中 输入 相关 信息 ， 如 图 32-30 所 示 。 

ED 单 击 【 确 认 添加 站 点 】 按 钮 ， 进 入 【站 点 设置 】 页 面 ， 如 图 32-31 所 示 。 

EEC 在 【统计 代码 】 选 项 卡 中 单 击 【 复 制 到 剪贴 板 】 按 钮 ， 根 据 需 要 复制 代码 ， 如 
图 32-32 所 示 。 
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图 32-31 【站 点 设置 】 页 面 32-32 复制 代码 


ET 将 代码 插入 到 页 面 源 代码 中 ， 如 图 32-33 所 示 。 
GET 保存 并 预览 效果 ， 如 图 32-34 所 示 。 
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图 32-33 ”添加 代码 到 页 面 源 代码 之 中 图 32-34 ”预览 网 页 


EECDD) 单 击 【站 长 统计 】 链 接 ， 进 入 数据 专家 网 查看 密码 页 ， 如 图 32-35 所 示 。 
EC 输入 查看 密码 ， 单 击 【查看 数据 】 按 钮 ， 即 可 查看 到 网 站 的 浏览 量 ， 如 图 32-36 
所 示 。 
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图 32-35 ”查看 密码 页 图 32-36 查看 网 站 浏览 量 


32.5” 跟 我 练 练 手 


32.5.1 练习 目标 
能 够 熟练 掌握 本 章 所 讲 内 容 。 


32.5.2 上 机 练习 


练习 1: 在 网 站 中 添加 广告 。 
练习 2: 在 网 站 中 添加 实用 查询 工具 。 
练习 3: 宣传 与 推广 网 站 。 
练习 4: 查看 网 站 的 流量 。 


32.6 高 手 甜 点 


甜点 1: 网 站 Logo 的 摆 放 位 置 


网 站 的 Logo 一 般 放 置 在 网 站 首页 的 左上 角 ， 这 和 人 的 阅读 习惯 有 关 ， 当 打开 网 站 时 ， 人 
的 阅读 习惯 是 将 眼睛 定位 在 左上 角 ， 这 样 能 够 使 浏览 者 更 好 地 记 住 网 站 的 品牌 ， 起 到 宣传 
作用 。 

甜点 2: 正确 添加 视频 播放 器 


在 网 站 中 添加 视频 播放 器 时 ， 应 尽量 使 用 音乐 文件 的 相对 路 径 ， 如 images\yinyue.mp3， 这 样 
当 网 页 文件 夹 的 路 径 发 生变 化 时 ， 视 频 播放 器 仍然 可 以 正常 地 连接 到 音乐 文件 。 


